说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<style>
ul,li{ /*去除内外边距，去除列表默认样式*/
margin:0;
padding:0;
list-style-type:none;
}
#imgList{ /*列表id*/
width:700px;
overflow:hidden;
zoom:1;
border:1px solid #333; /*深灰色*/
margin:0 auto;/*左右置中*/
padding:0 0 10px 10px;/*内边距*/
}
#imgList li{
float:left;/*左浮动，水平排列*/
width:128px;
height:128px;
border:1px solid #ccc;/*白色*/
margin:10px 10px 0 0;/*外边距*/
}
#imgList li img{
float:left;/*左浮动*/
opacity:0.3;/*透明度*/
cursor:crosshair;/*十字手形*/
filter:alpha(opacity=30);
}
#imgList li.current img{
opacity:1;
filter:alpha(opacity=100);
}
</style>
<script>
window.onload = function () {
var oLi = document.getElementsByTagName("li");//获取li引用，此方法返回一个集合
for (var i = 0; i < oLi.length; i++) { //for循环遍布每个li元素，逐个添加mouseover和mouseout事件处理程序
oLi[i].onmouseover = function () {
this.className = "current"; //mouseover，则添加类名，以达到改变透明度的效果
};
oLi[i].onmouseout = function () {//mouseout，去除类名，修改透明度
this.className = "";
}
}
}
</script>
</head>
<body>
<!--图片列表每个li元素包裹一个img元素-->
<ul id="imgList">
<li><img src="img/shirt_1.jpg" /></li>
<li><img src="img/shirt_2.jpg" /></li>
<li><img src="img/shirt_3.jpg" /></li>
<li><img src="img/shirt_4.jpg" /></li>
<li><img src="img/shirt_1.jpg" /></li>
<li><img src="img/shirt_2.jpg" /></li>
<li><img src="img/shirt_3.jpg" /></li>
<li><img src="img/shirt_4.jpg" /></li>
<li><img src="img/shirt_1.jpg" /></li>
<li><img src="img/shirt_2.jpg" /></li>
</ul>
</body>
</html>
时间： 2024-10-10 18:07:26