<!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>效果图：
