jQuery心型图片墙鼠标悬浮变大.zip资源-CSDN文库

共30个文件

jpg：28个

js：1个

html：1个

版权申诉

javascript

html5

jQuery

33 浏览量 2022-11-22 17:16:07 上传评论收藏 2.3MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery心型图片墙鼠标悬浮变大.zip （30个子文件）

jQuery心型图片墙鼠标悬浮变大

jiaoben1945

img

index_17.jpg 24KB

index_04.jpg 67KB

index_24.jpg 41KB

index_13.jpg 453KB

index_14.jpg 41KB

index_10.jpg 112KB

index_16.jpg 36KB

index_11.jpg 88KB

index_12.jpg 21KB

index_18.jpg 32KB

index_19.jpg 203KB

index_25.jpg 100KB

index_09.jpg 84KB

index_03.jpg 140KB

index_05.jpg 70KB

index_26.jpg 57KB

index_06.jpg 174KB

index_27.jpg 16KB

index_02.jpg 106KB

index_01.jpg 121KB

index_23.jpg 64KB

index_08.jpg 32KB

index_20.jpg 10KB

index_21.jpg 21KB

index_15.jpg 166KB

index_22.jpg 62KB

index_07.jpg 100KB

index.html 7KB

jquery-1.4.2.min.js 78KB

jQuery心型图片墙鼠标悬浮变大.jpg 79KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery心型图片墙鼠标悬浮变大 - 网页模板</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 */ .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 class="heartPic"> <ul> <li></li> <li> <div class="in"> <img width="100" height="100" src="img/index_01.jpg" /> <p class="pTxt">可爱的女娃娃</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_02.jpg" /> <p class="pTxt">呆萌的小熊</p> </div> </li> <li></li> <li> <div class="in"> <img width="100" height="100" src="img/index_03.jpg" /> <p class="pTxt">卡哇伊的小熊</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_04.jpg" /> <p class="pTxt">女巫骑着扫帚</p> </div> </li> <li></li> </ul> <ul> <li> <div class="in"> <img width="100" height="100" src="img/index_05.jpg" /> <p class="pTxt">女娃娃</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_06.jpg" /> <p class="pTxt">星星可爱</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_07.jpg" /> <p class="pTxt">呆萌女</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_08.jpg" /> <p class="pTxt">狗狗</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_09.jpg" /> <p class="pTxt">绿树</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_10.jpg" /> <p class="pTxt">粉爱粉爱的</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_11.jpg" /> <p class="pTxt">蜡笔小新</p> </div> </li> </ul> <ul> <li> <div class="in"> <img width="100" height="100" src="img/index_12.jpg" /> <p class="pTxt">震不碎的心</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_13.jpg" /> <p class="pTxt">很有意境</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_14.jpg" /> <p class="pTxt">樱木花道最爱啊</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_15.jpg" /> <p class="pTxt">俩骷髅</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_16.jpg" /> <p class="pTxt">萌妹子</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_17.jpg" /> <p class="pTxt">可爱的小狗</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_18.jpg" /> <p class="pTxt">夫妇俩白头偕老</p> </div> </li> </ul> <ul> <li></li> <li> <div class="in"> <img width="100" height="100" src="img/index_19.jpg" /> <p class="pTxt">刷子</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_20.jpg" /> <p class="pTxt">偶的头像</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_21.jpg" /> <p class="pTxt">树叶子</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_22.jpg" /> <p class="pTxt">星星</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_23.jpg" /> <p class="pTxt">浅色哦</p> </div> </li> <li></li> </ul> <ul> <li></li> <li></li> <li> <div class="in"> <img width="100" height="100" src="img/index_24.jpg" /> <p class="pTxt">太阳帅哥</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_25.jpg" /> <p class="pTxt">大笑脸</p> </div> </li> <li> <div class="in"> <img width="100" height="100" src="img/index_26.jpg" /> <p class="pTxt">企鹅</p> </div> </li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> <li> <div class="in"> <img width="100" height="100" src="img/index_27.jpg" /> <p class="pTxt">小兔子</p> </div> </li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript" src="js/jquery-1.4.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 style="text-align:center;clear:both"> <p>适用浏览器：IE8360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉