遍历让选中图片高亮

开发工具与关键技术：DW JavaScript
作者：Mr_肖先生
撰写时间：2019年2月7日

我们在html里插入图片，并简单写好样式

<div class="top">
		<div class="small_img" id="small_img">
			<span class=""><img src="images/01.jpg" alt=""></span>
			<span class=""><img src="images/02.jpg" alt=""></span>
			<span class="hove"><img src="images/03.jpg" alt=""></span>
			<span class=""><img src="images/04.jpg" alt=""></span>
			<span class=""><img src="images/05.jpg" alt=""></span>
			<span class=""><img src="images/06.jpg" alt=""></span>
			<span class=""><img src="images/07.jpg" alt=""></span>
			<span class=""><img src="images/08.jpg" alt=""></span>
			<span class=""><img src="images/09.jpg" alt=""></span>
		</div>
	</div>

.top{
	height: 139px;
	background: url(images/top.jpg)no-repeat center;
}
.small_img {
   width: 634px;
	height: 56px;
	position: absolute;
	top: 65px;
	left: 50%;
   display: inline;
   margin: 0 0 0 -310px;
}
.small_img span{
   width: 65px;
	height: 48px;
	float: left;
   border: 1px solid #000;
	display: inline;
   margin: 3px 0 0 3px;
	padding: 0px;
   opacity: 0.6;/*设置元素的不透明级别*/
   cursor: pointer;
}
.top #small_img span.hove{
	filter:alpha(opacity=100);/*--滤镜---*/
	opacity:1;/*--透明度--*/
}

我们可以看到它显示出来是这样的

接着是我们的js遍历循环了

//top图片高亮
		var Top_h = document.getElementById("small_img").getElementsByTagName("span");
		//遍历small_img中的所有元素，将类名为hove的类名清空	
		for(var i=0;i<Top_h.length;i++){
			Top_h[i].id=i;
			Top_h[i].onmousemove = function(){
				for(var j=0;j<Top_h.length;j++){
					if(Top_h[j].className==="hove"){
						Top_h[j].className="";
					}
				}
				this.className = "hove";
			};
		}

下面我来简单解释一下js部分，因为html和css部分我相信这些样式大家都能写出来，js才是关键，这里首先我们是获取到“small_img”下面的span标签，让它循环遍历small_img中的所有元素，让它将类名为hove的类名清空，hove是我们上面选中的一个类名，然后我们给一个鼠标移入事件，再让它遍历循环一遍，如果遍历到了有hove这个类的，就清空它，最后在当前鼠标移入的图片添加上hove这个类，就能达到让鼠标选中的图片高亮起来的效果