【yoyo】移入切换

最新推荐文章于 2024-09-18 09:39:26 发布

嗨帅

最新推荐文章于 2024-09-18 09:39:26 发布

阅读量278

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/wuxinren1990/article/details/77725514

版权

html 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 设置区域样式 -->
	<style>
		/*设置展示区样式*/
		.main {
			width: 500px;height: 400px;border: 3px solid cyan;margin: auto;overflow: hidden;
		}
		/*设置按钮区域样式*/
		.tip {
			width: 100%;height: 30px;
		}
		/*设置按钮样式*/
		button {
			width: 30px;height: 30px; background-color: red;margin-left: 70px;color: white;
		}
		/*设置图片区域样式*/
		.img_div {
			width: 300px;height: 350px;background-color: yellow;margin: 20px auto;
		}
		/*设置图片样式*/
		img {
			width: 100%;height: 100%;background-color: pink;
		}

	</style>
</head>
<body>
	<!-- 创建一个区域 -->
	<div class="main">
		<!-- 创建一个点击区域 -->
		<div class="tip">
			<!-- 创建4个按钮 -->
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
		</div>
		<!-- 创建一个放置图片的区域 -->
		<div class="img_div">
			<!-- 创建4张图片 -->
			<img src="1.jpg" alt="">
			<img src="2.jpg" alt="">
			<img src="3.jpg" alt="">
			<img src="4.jpg" alt="">
		</div>
	</div>
</body>
<script>
	// 获取元素内容
	var btn = document.getElementsByTagName('button');
	var imgDiv = document.getElementsByTagName('img');
	// 因for循环执行完毕后，最终显示结果只能展示第四个图片，因此将全局变量i，设置为局部变量a
	for (var i = 0; i < btn.length; i++) {
		(function(a){
			// 添加执行动作，通过鼠标显示选择图片
			btn[i].onmouseover = function(){
				// 当鼠标移入时先隐藏所有照片，按钮颜色保持不变
				for (var j = 0; j < btn.length; j++) {
					imgDiv[j].style.display = 'none';
					btn[j].style.backgroundClor = 'red';
				}
				//改变被点击的按钮颜色，并将该按钮对应的图片展示出来
				this.style.backgroundClor = 'cyan';
				imgDiv[a].style.display  = 'block';
			}
		})(i);		
	}
</script>
</html>
效果展示：