你的位置:首页 > Java教程

[Java教程]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="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >可爱的女娃娃</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >呆萌的小熊</p>      </div>    </li>  <li></li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >卡哇伊的小熊</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >女巫骑着扫帚</p>      </div>    </li>  <li></li>  </ul>  <ul>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >女娃娃</p>      </div>    </li>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >星星可爱</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >呆萌女</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >狗狗</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >绿树</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >粉爱粉爱的</p>      </div>    </li>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >蜡笔小新</p>      </div>    </li>  </ul>  <ul>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >震不碎的心</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >很有意境</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >樱木花道最爱啊</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >俩骷髅</p>      </div>    </li>  <li>      <div >     <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >萌妹子</p>      </div>    </li>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >可爱的小狗</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >夫妇俩白头偕老</p>      </div>    </li>  </ul>  <ul>  <li></li>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >刷子</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >偶的头像</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >树叶子</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >星星</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >浅色哦</p>      </div>    </li>  <li></li>  </ul>  <ul>  <li></li>  <li></li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >太阳帅哥</p>      </div>    </li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >大笑脸</p>      </div>    </li>  <li>      <div >      <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >企鹅</p>      </div>    </li>  <li></li>  <li></li>  </ul>  <ul>  <li></li>  <li></li>  <li></li>  <li>      <div >        <img src="D:/Documents/Pictures/0.gif" width="100" height="100" border="0" alt="">        <p >小兔子</p>      </div>    </li>  <li></li>  <li></li>  <li></li>  </ul></div><script type="text/javascript" src="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>