鼠标经过图片显示淡入淡出效果（jquery实现）

米硕

于 2021-10-12 20:33:53 发布

阅读量991

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/mishuo24/article/details/120731394

版权

先看一下最终实现的效果：

1、html+css的代码如下：

<style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background-color: black;
        }

        div {
            width: 950px;
            height: 450px;
            margin: 100px auto;
            border: 2px solid white;
        }

        li {
            float: left;
            list-style: none;
            width: 300px;
            height: 200px;
            border: 2px solid white;
            margin-top: 15px;
            margin-left: 10px;
        }
    </style>
<body>
    <div>
        <ul>
            <li><img src="../image/plane.jpg" alt="" width="300px" height="200px"></li>
            <li><img src="../image/ocean.jpg" alt="" width="300px" height="200px"></li>
            <li><img src="../image/jjy.jpg" alt="" width="300px" height="200px"></li>
            <li><img src="../image/sky.jpeg" alt="" width="300px" height="200px"></li>
            <li><img src="../image/wanshang.jpg" alt="" width="300px" height="200px"></li>
            <li><img src="../image/zhongwu.jpg" alt="" width="300px" height="200px"></li>
        </ul>
    </div>

</body>

2、jQuery代码

<script>
    $(function () {
        //这里的hover写法表示 第一个函数 代表鼠标经过，第二个函数代表鼠标离开
        $('ul li').hover(function () {
            $(this).siblings().stop().fadeTo(200, .5);  //fadeTo 修改透明度 500时间  .5 不透明度
        }, function () {
            $(this).siblings().stop().fadeTo(200, 1);
        });
    })
</script>

米硕

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过图片显示淡入淡出效果（jquery实现）

先看一下最终实现的效果：1、html+css的代码如下：<style> * { padding: 0px; margin: 0px; } body { background-color: black; } div { width: 950px; height: 450px; .
复制链接

扫一扫