图片选择事件

飞鱼同学

已于 2022-04-08 22:20:41 修改

阅读量191

点赞数 1

分类专栏：前端页面文章标签： javascript html css html5

于 2021-01-26 22:26:22 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113200012

版权

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图片选择

效果展示：
在这里插入图片描述
代码->index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片选择</title>
		<style type="text/css">
			{
				padding: 0;
				margin: 0;
			}
			.max{
				width: 415px;
				height: 400px;
			}
			.min>img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="">
			<img src="img/poiu.jpg" class="max"/>
		</div>
		<div class="min">
			<img src="img/poiu.jpg"/>
			<img src="img/asdf.jpg"/>
			<img src="img/mnbvc.jpg"/>
			<img src="img/qwer.jpg"/>
		</div>
		<script type="text/javascript">
			//当鼠标放在小图上面的时候，显示在大图的位置
			let imgs = document.getElementsByTagName('img');
			//移入
			for (let i = 1;i <imgs.length; i++) {
				imgs[i].onmouseover = function(){
					//改变大图的路径
					imgs[0].src = this.src;
					this.style.border= '1px solid red';
				}
			}
			//移除
			for (let i = 1;i <imgs.length; i++) {
				imgs[i].onmouseout = function(){
					this.style.border='';
				}
			}
		</script>
	</body>
</html>