第2课--2.5for的图片生成应用我的版本

最新推荐文章于 2024-05-21 08:12:34 发布

汪超凡

最新推荐文章于 2024-05-21 08:12:34 发布

阅读量181

点赞数

分类专栏：妙味课堂Js基础课后练习文章标签： JS基础妙味课堂

本文链接：https://blog.csdn.net/wcf1991/article/details/78369839

版权

妙味课堂Js基础课后练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for的图片生成应用我的版本</title>
	<style>
		body{
			margin:0;
		}
		img{
			text-align:center;
		}
		#wrap{
			width:500px;
			height:600px;
			overflow:hidden;
			position:absolute;
			margin:10px 400px;
		}
		.pic_top{
			width:50px;
			height:50px;
			background-color:#f1f1f1;
			position:absolute;
		}
	</style>

	<script>
	window.onload = function(){
		var Wrap = document.getElementById("wrap");
		var oDiv = Wrap.getElementsByTagName("div");

		var l = 0;
		var t = 0;
		var i = 0;

		var str = "";

		for(i = 0 ;i < 120;i++){

			if(i > 0 && i % 10 == 0){
				l = 0;
				t += 50;
			}

			str += '<div class = "pic_top" style = "left:'+ l +'px;top:'+ t +'px;"></div>';
			l += 50;
		}

		Wrap.innerHTML += str;

		for(i = 0;i < 120;i++){

			oDiv[i].onmouseover = function(){

				this.style.display = "none";
			}
		}

	}
	</script>
</head>
<body>
	<div id = "wrap">
		<img src = "img/pic.jpg"/>
	</div>
</body>
</html>