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

原创于 2017-10-27 22:10:20 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS基础 #妙味课堂

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

9 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的图片生成应用实例。该应用通过动态生成一系列div元素覆盖在图片上，并在鼠标悬停时隐藏这些元素，从而展示底图。文章详细展示了如何设置页面布局、样式以及JavaScript代码来实现这一效果。

部署运行你感兴趣的模型镜像

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