随笔- 496 文章- 0 评论- 52 阅读- 36万

JQuery生成图片列表

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>生成图片列表</title>
 5     <style type="text/css">
 6         *{ margin: 0px; padding: 0px; }
 7         .bpp4{ width: 700px; height: 280px; padding-left: 10px; padding-bottom: 10px; border: 1px solid #333333; margin: 30px auto; }
 8         .bpp4 div{ width: 128px; height: 128px; margin-top: 10px; margin-right: 10px; float: left; transition: all .1s; }
 9         .bpp4 div.current{ box-shadow: 2px 2px  5px  #808080, -2px -2px 5px #808080; transform: translateZ(2000px); }
10     </style>
11 
12     <script src="../../jquery-3.4.1.min.js"></script>
13 
14 </head>
15 <body>
16 <div class="bpp4">
17 
18 </div>
19 
20 <script type="text/javascript">
21     $(document).ready(function(){
22         // 创建数组
23         var colorimg = ["pink", "yellow", "orange", "green", "blue", "grey", "red", "purple", "bisque", "olive"];
24         // 生成子元素
25         for(var i in colorimg){
26             $(".bpp4").append("<div></div>");
27         }
28         // 遍历元素
29         $(".bpp4 div").each(function(i){
30             $(this).css("background", colorimg[i]);
31             $(this).hover(function(){
32                     this.className += "current";
33                 }
34                 ,function(){
35                     this.className = "";
36                 });
37         });
38     });
39 </script>
40 </body>
41 </html>