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

最新推荐文章于 2023-06-15 17:03:12 发布

因火成烟

最新推荐文章于 2023-06-15 17:03:12 发布

阅读量3.6k

点赞数 1

文章标签： css js html web前端

本文链接：https://blog.csdn.net/thefoma/article/details/44924879

版权

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

去除列表样式原有的样式；宽度；高度跟随内容变化（不设置；居中；黑色边框，内边距；设置内容与元素框的关系，使用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>

因火成烟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现鼠标的移入移出控制图片的明暗显示

这是具体的样式，用的是无序列表。去除列表样式原有的样式；宽度；高度跟随内容变化（不设置；居中；黑色边框，内边距；设置内容与元素框的关系，使用overflow（规定如何处理不符合元素框的内容）在每个li里面放置img设置li的高度与宽度；元素浮动；边框；外边距上10px，下10px 左右为0；img 设置向左浮动；透明度；滤镜再次设置（可以不用）;鼠标移入移出时的变化；给l
复制链接

扫一扫