js实现鼠标的移入移出控制图片的明暗显示

这是具体的样式,用的是无序列表。

去除列表样式原有的样式;宽度;高度跟随内容变化(不设置;居中;黑色边框,内边距;设置内容与元素框 的关系,使用overflow(规定如何处理不符合元素框的内容)

在每个li里面放置img

设置li的高度与宽度;元素浮动;边框;外边距 上10px,下10px 左右为0;

img 设置向左浮动;透明度;滤镜再次设置 (可以不用);鼠标移入移出时的变化;

给li添加class,通过js来控制该class的添加与取消;该类写上移入时 的透明度

贴上代码:

ul,li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#mylist{
	margin: 0 auto;
	width: 700px;
	border: 1px solid #333;
	padding: 0 0 10px 10px;
	overflow: hidden;
/*	zoom:1;*/
}
#mylist li{
	float: left;
	width: 128px;
	height: 128px;
	border: 1px solid #ccc;
	margin: 10px 10px 0 0;
}
#mylist li img{
	float: left;
	opacity: 0.3;
	cursor: crosshair;
	filter: alpha(opacity==30);
}
#mylist li.current img{
	opacity: 1;
	filter: alpha(opacity==100);
}
js:通过dom操作找到li标签(其实在css写类时可以写在img里,通过dom找img标签一样实现)

使用循环确定鼠标移入时停在某一个li上面,找到停留的li并添加onmouseover事件。通过this关键字添加该类;实现移入时的变化;

通过onmouseout事件实现移出时的效果:

var i = document.getElementsByTagName("img");
for (var c = 0;c<i.length;c++)
{
	i[c].onmouseover = function()
	{
		this.className = "current";
	}
	i[c].onmouseout = function(){
		this.className ="";	
	}
}
html代码:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="d.css">
</head>

<body>
	<ul id="mylist">
		<li><img src="images/1.jpg" alt="1">
		</li>
		<li><img src="images/2.jpg" alt="2">
		</li>
		<li><img src="images/3.jpg" alt="3">
		</li>
		<li><img src="images/4.jpg" alt="4">
		</li>
		<li><img src="images/5.jpg" alt="5">
		</li>
		<li><img src="images/6.jpg" alt="6">
		</li>
		<li><img src="images/7.jpg" alt="7">
		</li>
		<li><img src="images/8.jpg" alt="8">
		</li>
		<li><img src="images/9.jpg" alt="9">
		</li>
		<li><img src="images/10.jpg" alt="10">
		</li>
	</ul>
	<script src="d.js"></script>
</body>

</html>


相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页