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;
21 position: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事件绑定给遮罩层。
由于图片路径问题，可能复制源代码无法看到图片，想看效果的可以自己引入正确的图片路径。第一次写博客，有不足的地方请指教。
原文地址：https://www.cnblogs.com/lvyuqing/p/9091077.html
时间： 2024-10-27 19:01:56