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

Posted 2020-09-01 sx00xs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[读码时间] 图片列表：鼠标移入/移出改变图片透明度相关的知识，希望对你有一定的参考价值。

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

<!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

以上是关于[读码时间] 图片列表：鼠标移入/移出改变图片透明度的主要内容，如果未能解决你的问题，请参考以下文章

鼠标移入移出改变透明度

Vue中前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片

HTML5+CSS3鼠标移入移出图片生成随机动画

Vue鼠标移入移出更改图片。

angular js 鼠标移过图片放大，就是放在图片上图片放大或者反击，

jQuery轮播图鼠标移入停止，移出播放，点击小横条切换图片