效果如图:
代码如下:
<!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