小白書寫Jquery小動畫踩的坑
阿新 • • 發佈：2018-05-26
效果 block 復制 重點 ngs nbsp top dom add
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>動態添加圖片</title> 6 <style> 7 *{margin:0;padding:0;} 8 .box { 9 width:660px; 10 height:660px; 11 border:1px solid black; 12 margin:auto; 13 } 14 .box .picbox { 15 width:200px; 16 height:240px; 17 float:left; 18 margin:10px; 19 background-color:#eee; 20 text-align:center; 21position:relative; 22 } 23 .box .picbox img { 24 width:180px; 25 height:180px; 26 margin:10px; 27 } 28 .box .picbox .mask { 29 width:180px; 30 height:180px; 31 line-height:180px; 32 text-align:center; 33 position:absolute; 34 left:10px; 35 top:10px; 36 background-color:#777; 37 opacity:0.4; 38 display:none; 39 } 40 </style> 41 <script src="http://code.jquery.com/jquery-latest.js"></script> 42 <script> 43 $(function(){ 44 //JSON傳入圖片，改變JSON即可改變圖片個數 45 var json={"圖片一":"img/1.jpg","圖片二":"img/2.jpg","圖片三":"img/3.jpg","圖片四":"img/4.jpg","圖片五":"img/5.jpg","圖片六":"img/6.jpg"}; 46 var str=""; 47 //字符串str生成整個圖片盒子的標簽 48 for(var key in json){ 49 str+="<div class=‘picbox‘>"; 50 str+=" <img src=‘"+json[key]+"‘ alt=‘‘/>"; 51 str+=" <span>"+key+"</span>" 52 str+=" <div class=‘mask‘>"; 53 str+=" <p>"+key+"</p>"; 54 str+=" </div>"; 55 str+="</div>"; 56 } 57 //將生成的元素放到一個類名為box的盒子中。 58 $(".box").append(str); 59 //重點部分，鼠標觸發事件，然後執行動畫，重點在於觸發事件元素的選擇 60 $(".picbox img").mouseover(function(){ 61 $(this).siblings(".mask").slideDown(); 62 }); 63 $(".picbox .mask").mouseout(function(){ 64 $(this).slideUp(); 65 }); 66 }); 67 </script> 68 </head> 69 <body> 70 <div class="box"></div> 71 </body> 72 </html>
近日看了下Jquery的基礎知識，對常用的Jquery方法有了個大致了解，想寫個通過Jquery動態生成圖片，並且當鼠標放在圖片上面的時候還有一個面罩從上往下滑下來，當鼠標離開的時候面罩又會劃上去的的小特效練習一下。這是一個很簡單的小dom，稍微有點基礎的人都可以很快的寫出來，不過新手有一個小問題要註意一下，新手在選擇鼠標經過和離開的觸發事件的元素的時候很容易兩次都選擇圖片。這樣會造成一個問題，就是當鼠標放在圖片上面的時候，就算鼠標不離開圖片，也會出現面罩下拉出現，然後再上拉消失的效果，並且一直循環。這是因為當鼠標進入圖片時觸發了slideDown，這時候遮罩層display:block，圖片位於遮罩層下面，鼠標選中的就是遮罩層而不是圖片，此時觸發了slideUp，當遮罩層消失時鼠標又重新選擇到了圖片，又觸發slideDown，反復這樣，所以會出現反復上下拉。解決方法：可以把mouseleave事件綁定給遮罩層。
由於圖片路徑問題，可能復制源代碼無法看到圖片，想看效果的可以自己引入正確的圖片路徑。第一次寫博客，有不足的地方請指教。
小白書寫Jquery小動畫踩的坑