|
|
Line 2: |
Line 2: |
| <html xmlns="http://www.w3.org/1999/xhtml"> | | <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> | | <head> |
- | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
| + | <title>jQuery鼠标悬浮图片放大特效</title> |
- | <title>jQuery心型图片墙鼠标悬浮变大</title> | + | <script src="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script> |
- | <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 class="heartPic">
| + | |
- | <ul>
| + | |
- | <li></li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" />
| + | |
- | <p class="pTxt">可爱的女娃娃</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" />
| + | |
- | <p class="pTxt">呆萌的小熊</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li></li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" />
| + | |
- | <p class="pTxt">卡哇伊的小熊</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" />
| + | |
- | <p class="pTxt">女巫骑着扫帚</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li></li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" />
| + | |
- | <p class="pTxt">女娃娃</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" />
| + | |
- | <p class="pTxt">星星可爱</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" />
| + | |
- | <p class="pTxt">呆萌女</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" />
| + | |
- | <p class="pTxt">狗狗</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" />
| + | |
- | <p class="pTxt">绿树</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" />
| + | |
- | <p class="pTxt">粉爱粉爱的</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" />
| + | |
- | <p class="pTxt">蜡笔小新</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" />
| + | |
- | <p class="pTxt">震不碎的心</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" />
| + | |
- | <p class="pTxt">很有意境</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" />
| + | |
- | <p class="pTxt">樱木花道最爱啊</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" />
| + | |
- | <p class="pTxt">俩骷髅</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" />
| + | |
- | <p class="pTxt">萌妹子</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" />
| + | |
- | <p class="pTxt">可爱的小狗</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" />
| + | |
- | <p class="pTxt">夫妇俩白头偕老</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <li></li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" />
| + | |
- | <p class="pTxt">刷子</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" />
| + | |
- | <p class="pTxt">偶的头像</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" />
| + | |
- | <p class="pTxt">树叶子</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" />
| + | |
- | <p class="pTxt">星星</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/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="/jscss/demoimg/201404/index_24.jpg" />
| + | |
- | <p class="pTxt">太阳帅哥</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" />
| + | |
- | <p class="pTxt">大笑脸</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <div class="in">
| + | |
- | <img width="100" height="100" src="/jscss/demoimg/201404/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="/jscss/demoimg/201404/index_27.jpg" />
| + | |
- | <p class="pTxt">小兔子</p>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li></li>
| + | |
- | <li></li>
| + | |
- | <li></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
| + | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
| $(function(){ | | $(function(){ |
- | $(".heartPic li").hover(function(){
| + | var imgWid = 0 ; |
- | $(this).addClass("on");
| + | var imgHei = 0 ; //变量初始化 |
- | $(this).find("img").animate({"width":"200px","height":"200px"});
| + | var big = 5.2;//放大倍数 |
- | $(this).find("div").animate({"width":"200px","height":"200px"});
| + | $(".banimg li").hover(function(){ |
- | $(this).find(".pTxt").animate({"width":"200px","height":"20px"});
| + | $(this).find("img").stop(true,true); |
- | $(this).find("p").addClass("showDiv");
| + | var imgWid2 = 0;var imgHei2 = 0;//局部变量 |
- | },function(){
| + | imgWid = $(this).find("img").width(); |
- | $(this).animate({height:"100px"},100).removeClass("on");
| + | imgHei = $(this).find("img").height(); |
- | $(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
| + | imgWid2 = imgWid * big; |
- | $(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
| + | imgHei2 = imgHei * big; |
- | $(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
| + | $(this).find("img").css({"z-index":2}); |
- | });
| + | $(this).find("img").animate({"width":imgWid2,"height":imgHei2,"margin-left":-imgWid2/2,"margin-top":-imgHei2/2}); |
| + | },function(){$(this).find("img").stop().animate({"width":imgWid,"height":imgHei,"margin-left":-imgWid/2,"margin-top":-imgHei/2,"z-index":1});}); |
| }) | | }) |
| </script> | | </script> |
- | <div style="text-align:center;clear:both"> | + | <style type="text/css"> |
- | </div> | + | *{margin: 0; padding: 0; list-style: none;} |
| + | .banimg{width: 600px;height: 200px; margin: 20px auto;} |
| + | .banimg li{ width: 200px; height: 200px; float: left; position: relative;} |
| + | .banimg li img{ width: 200px; height: 200px; position: absolute; left: 50%;top: 50%;margin: -100px 0 0 -100px;z-index: 1;} |
| + | </style> |
| + | </head> |
| + | <body> |
| + | <ul class="banimg"> |
| + | <li><a href="#"><img src="/jscss/demoimg/wall_s7.jpg" /></a></li> |
| + | <li><a href="#"><img src="/jscss/demoimg/wall_s8.jpg" /></a></li> |
| + | </ul> |
| </body> | | </body> |
| </html> | | </html> |