图片选择

图片选择

效果展示:
图片选择_第1张图片
代码->index.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>

说明:鼠标放在小图的上面时,在大图的位置显示小图片,同时小图的边框发生改变,当鼠标移出时,边框恢复。

你可能感兴趣的:(前端,javascript,html,css,html5)