效果图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> * { margin: 0; padding: 0; } html { height: 100%; } body { background-image: url(../img/randomdivbg.png); background-size: 100% 100%; } .imgspace { margin: auto; 1200px; height: 500px; position: relative; border: 1px solid black; } </style> <body> <div class="bg"> <div class="imgspace"></div> </div> </body> <script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script> <script> var img = ["../worldcup/cup1.png", "../worldcup/cup2.png", "../worldcup/cup3.png", "../worldcup/cup4.png", "../worldcup/cup5.png", "../worldcup/cup6.png", "../worldcup/cup7.png", "../worldcup/cup8.png", "../worldcup/cup9.png", "../worldcup/cup10.png", "../worldcup/cup11.png", "../worldcup/cup12.png", "../worldcup/cup13.png", "../worldcup/cup14.png", "../worldcup/cup15.png", "../worldcup/cup16.png" ]; var imgX = {}; for(var i = 0; i < 15; i++) { var div = $("<div></div>"); var width = parseInt(Math.random() * (250 - 150 + 1) + 150); var height = parseInt(width * 0.6); var margin = parseInt(Math.random() * (20 + 20 + 1) - 20); var rotate = parseInt(Math.random() * 30); var zindex = parseInt(Math.random() * 3); var imgindex; while(true) { imgindex = parseInt(Math.random() * img.length); if(!imgX[imgindex]) { imgX[imgindex] = 1; break; } } div.css("width", "" + width + "px"). css("height", "" + height + "px"). css("margin", "" + margin + "px"). css("background-color", "#FF0000"). css("display", "inline-block"). css("background-image", "url(" + img[imgindex] + ")"). css("background-size", "100% 100%"). css("border", "5px solid white"). css("transform", "rotate(" + rotate + "deg)"). css("z-index", "" + zindex + ""); div.clone().prependTo($(".imgspace")); } </script> </html>