jq手風琴效果
阿新 • • 發佈：2017-12-19
each char 事件 其他 adding set () jpg scrip
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style: none;13 } 14 a{ 15 text-decoration: none; 16 color:#333; 17 } 18 .box{ 19 width: 900px; 20 height: 300px; 21 border: 1px solid #000; 22 margin: 50px auto; 23 overflow: hidden; 24 position: relative;25 } 26 .box ul li{ 27 position: absolute; 28 left:0px; 29 width: 560px; 30 height: 300px; 31 } 32 .box ul li.no1{ 33 left:180px; 34 } 35 .box ul li.no2{ 36 left:360px; 37 }38 .box ul li.no3{ 39 left:540px; 40 } 41 .box ul li.no4{ 42 left:720px; 43 } 44 .box ul li .mask{ 45 position: absolute; 46 width: 560px; 47 height: 300px; 48 left:0; 49 top:0; 50 background-color: rgba(0,0,0,.6); 51 } 52 </style> 53 </head> 54 <body> 55 <div class="box"> 56 <ul> 57 <li class="no0"> 58 <div class="mask"></div> 59 <a href=""><img src="images/0.jpg" ></a> 60 </li> 61 <li class="no1"> 62 <div class="mask"></div> 63 <a href=""><img src="images/1.jpg" ></a> 64 </li> 65 <li class="no2"> 66 <div class="mask"></div> 67 <a href=""><img src="images/2.jpg" ></a> 68 </li> 69 <li class="no3"> 70 <div class="mask"></div> 71 <a href=""><img src="images/3.jpg" ></a> 72 </li> 73 <li class="no4"> 74 <div class="mask"></div> 75 <a href=""><img src="images/4.jpg" ></a> 76 </li> 77 </ul> 78 </div> 79 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 80 <script type="text/javascript"> 81 $("li").mouseenter(function(){ 82 // 將觸發事件的對象序號保存 83 var idx = $(this).index(); 84 // 小於等於序號往左移動85 85 $("li:lt(" + (idx + 1) + ")").each(function(i){ 86 $(this).animate({"left": 85 * i},400); 87 }); 88 89 // 大於信號序號往右移動 90 $("li:gt(" + idx + ")").each(function(i){ 91 // console.log(i); 92 $(this).animate({"left": 560 + 85 * (idx + i)},400); 93 }); 94 95 // 鼠標進入圖片去掉蒙版 96 $(this).children(".mask").fadeOut(); 97 // 其他兄弟加上蒙版 98 $(this).siblings().children(".mask").fadeIn(); 99 }); 100 101 102 // 鼠標離開恢復原狀 103 $(".box").mouseleave(function(){ 104 $("li").stop(true); 105 $("li").each(function(i){ 106 // console.log(i); 107 $(this).animate({"left": 180 * i},400); 108 }); 109 $("li").children(".mask").fadeIn(); 110 }); 111 112 113 114 115 116 </script> 117 </body> 118 </html>
jq手風琴效果