首页 > 代码库 > [读码时间] 图片列表：鼠标移入/移出改变图片透明度

[读码时间] 图片列表：鼠标移入/移出改变图片透明度

2024-09-05 18:54:03   218人阅读

说明：代码来自网络。注释为笔者学习时添加。

技术分享 
<!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>
View Code

 

[读码时间] 图片列表：鼠标移入/移出改变图片透明度


联系
我们