星空网 > 软件开发 > Java

JQuery特效之心形图片墙

效果如图:

JQuery特效之心形图片墙

 

代码如下:

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title><style type="text/css">*{padding:0; margin:0;}ul,li{list-style:none;}body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}.heartPic ul{float:left;width:749px;}.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}.heartPic ul li.on{z-index:99;}.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}.heartPic .showDiv{display:block;}</style></head><body><div >  <ul>    <li></li>    <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >可爱的女娃娃</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >呆萌的小熊</p>      </div>    </li>  <li></li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >卡哇伊的小熊</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >女巫骑着扫帚</p>      </div>    </li>  <li></li>  </ul>  <ul>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >女娃娃</p>      </div>    </li>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >星星可爱</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >呆萌女</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >狗狗</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >绿树</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >粉爱粉爱的</p>      </div>    </li>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >蜡笔小新</p>      </div>    </li>  </ul>  <ul>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >震不碎的心</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >很有意境</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >樱木花道最爱啊</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >俩骷髅</p>      </div>    </li>  <li>      <div >     <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >萌妹子</p>      </div>    </li>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >可爱的小狗</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >夫妇俩白头偕老</p>      </div>    </li>  </ul>  <ul>  <li></li>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >刷子</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >偶的头像</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >树叶子</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >星星</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >浅色哦</p>      </div>    </li>  <li></li>  </ul>  <ul>  <li></li>  <li></li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >太阳帅哥</p>      </div>    </li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >大笑脸</p>      </div>    </li>  <li>      <div >      <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >企鹅</p>      </div>    </li>  <li></li>  <li></li>  </ul>  <ul>  <li></li>  <li></li>  <li></li>  <li>      <div >        <img src='/images/loading.gif' data-original="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" >        <p >小兔子</p>      </div>    </li>  <li></li>  <li></li>  <li></li>  </ul></div><script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//ajaxjs/jquery-1.6.2.min.js"></script><script type="text/javascript">$(function(){  $(".heartPic li").hover(function(){    $(this).addClass("on");    $(this).find("img").animate({"width":"200px","height":"200px"});    $(this).find("div").animate({"width":"200px","height":"200px"});    $(this).find(".pTxt").animate({"width":"200px","height":"20px"});    $(this).find("p").addClass("showDiv");  },function(){    $(this).animate({height:"100px"},100).removeClass("on");    $(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});    $(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});    $(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});  });})</script><div ></div></body></html>

 




原标题:JQuery特效之心形图片墙

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

眼镜电商Eyewa介绍:https://www.ikjzd.com/w/1270
ModCloth女装商城介绍:https://www.ikjzd.com/w/1271
Zibbet手工平台介绍:https://www.ikjzd.com/w/1272
reverb:https://www.ikjzd.com/w/1273
Cratejoy平台介绍:https://www.ikjzd.com/w/1274
Netshoes公司介绍:https://www.ikjzd.com/w/1275
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流