jQuery生成图片列表

最新推荐文章于 2022-11-25 12:30:05 发布

kelokole

最新推荐文章于 2022-11-25 12:30:05 发布

阅读量804

点赞数

本文链接：https://blog.csdn.net/qq_44254672/article/details/91843509

版权

<!DOCTYPE html>
<html>
    <head>
        <title>生成图片列表</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; }
            .bpp4{ width: 700px; height: 280px; padding-left: 10px; padding-bottom: 10px; border: 1px solid #333333; margin: 30px auto; }
            .bpp4 div{ width: 128px; height: 128px; margin-top: 10px; margin-right: 10px; float: left; transition: all .1s; }
            .bpp4 div.current{ box-shadow: 2px 2px  5px  #808080, -2px -2px 5px #808080; transform: translateZ(2000px); }
        </style>
        
        <script src="../../jquery-3.4.1.min.js"></script>

    </head>
    <body>
        <div class="bpp4">

        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                // 创建数组
                var colorimg = ["pink", "yellow", "orange", "green", "blue", "grey", "red", "purple", "bisque", "olive"];
                // 生成子元素
                for(var i in colorimg){
                    $(".bpp4").append("<div></div>");
                }
                // 遍历元素
                $(".bpp4 div").each(function(i){
                    $(this).css("background", colorimg[i]);
                    $(this).hover(function(){
                        this.className += "current";
                    }
                    ,function(){
                        this.className = "";
                    });
                });
            });
        </script>
    </body>
</html>

效果图：