b站pink老师JavaScript的jQuery 案例代码——突出显示案例

快意人生大社畜

已于 2023-07-07 11:39:55 修改

阅读量537

点赞数 2

分类专栏： jQuery 文章标签： html 前端

于 2022-10-05 16:27:47 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/127173824

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

目标效果：

1.鼠标进入当前li,其他li透明度在0.4S变为0.5

2.鼠标离开当前li，其他li透明度在0.4S变为1

使用jquery记得引入jquery文件：

重点代码/原理：

1.hover(两个函数) 事件切换

第一个function表示鼠标经过时触发

第二个function表示鼠标离开时触发

2.stop() 停止排队

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //1.鼠标进入当前li,其他li透明度在0.4S变为0.5
            $('.wrap li').hover(function () {
                $(this).siblings('li').stop().fadeTo(400, 0.5);
            }, function () {
                // 2.鼠标离开当前li，其他li透明度在0.4S变为1
                $(this).siblings('li').stop().fadeTo(400, 1);
            });
        });
    </script>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>

</html>