jQuery学习笔记——图片突出效果实例

最新推荐文章于 2024-07-26 20:46:33 发布

Ankry果冻

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量208

点赞数

分类专栏： JQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_41306215/article/details/105761547

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：

鼠标停留在图片上，对应图片高亮，其他图片变暗
鼠标离开盒子，所有图片变暗

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQurey</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            overflow: hidden;
            margin: 100px auto;
            width: 940px;
            padding-left: 10px;
            padding-top: 10px;
            border: 1px solid #fff;
        }

        img{
            float: left;
            width: 300px;
            height: 200px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        
    </style>
    <script src="jquery-3.4.1.min.js"></script>
    <script>

        $(function(){

            //1.鼠标触碰li，透明度变为1，其他兄弟元素为0.4
            $('body').css('background','black');        
            $('#box li').mouseenter(function(){
                $(this).css('opacity','1').siblings('li').css('opacity','0.4');
            });


            //2.鼠标离开盒子，所有li标签透明度变为1
            $('#box').mouseleave(function () { 
                //方法一：
                // $('#box').find('li').css('opacity','1');

                //方法二：
                $(this).find('li').css('opacity','1');
             });
        });
            
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/x1.jpg"></li>
            <li><img src="images/x2.jpg"></li>
            <li><img src="images/x3.jpg"></li>
            <li><img src="images/x4.jpg"></li>
            <li><img src="images/x5.jpg"></li>
            <li><img src="images/x6.jpg"></li>
        </ul>
    </div>
</body>
</html>

知识点&技巧

改变图片的opacity属性，可以设置透明度

利用this来表示当前操作的元素

Ankry果冻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——图片突出效果实例

效果：鼠标停留在图片上，对应图片高亮，其他图片变暗鼠标离开盒子，所有图片变暗代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
复制链接

扫一扫

专栏目录