• 个人相册


    效果图:

    代码如下:

    <!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>
    

      

     

  • 相关阅读:
    第二阶段冲刺第四天
    第二阶段冲刺第三天
    第二阶段冲刺第二天
    第二阶段冲刺第一天
    软件工程结对作业01(补充)
    软件工程概论个人总结
    梦断代码阅读笔记06
    梦断代码阅读笔记05
    构建之法阅读笔记04
    构建之法阅读笔记01
  • 原文地址:https://www.cnblogs.com/EdinburghOne/p/9546783.html
Copyright © 2020-2023  润新知