利用jQuery极简代码完成选中部分高亮显示效果

当我们在制作一个网页时,常常会有想要选中部分高亮的需求,那么怎么用jQuery的极简代码完成这件事呢?

利用jQuery极简代码完成选中部分高亮显示效果

可以看到,三个图片中,当我们的鼠标移到哪个上面,哪个就从中脱颖而出,其实这只需要一段非常简单的代码即可完成

$(function() {
//设置鼠标进入的时候,其他的li标签透明度:0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 设置鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
})

 上段代码中的hover在上一篇文章中已经提到过,siblings也在之前的文章中提到过,这里就不过多阐述,这里我们主要注意一下stop()的用法

stop()即停止排队效果,且必须写到动画的前面

什么意思呢?让我们来看一段没有stop()的动画效果

利用jQuery极简代码完成选中部分高亮显示效果 

可以看到,当我们快速多次经过图片后,即使鼠标已经移开,但是依然在执行操作,如果有个熊孩子一直这样划,或者我们在操作过程中出现失误,就会给浏览器加载带来过多的负担,所以stop()的作用就非常关键了

stop()会停止上一个动作,只做最后一个动作 

说了这么多,我们把高亮显示和stop()代码放到整体代码中,大家感受一下这两个代码的用法

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Wellfancy</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background: #000;
        }
        
        .wrap {
            margin: 100px auto 0;
            width: 278px;
            height: 490px;
            padding: 1px;
            background: white;
            overflow: hidden;
            border: 1px solid #ffffff;
        }
        
        .wrap li {
            float: left;
            margin: 3px 2px;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(function() {
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>
</head>

<body>
    <div class="wrap">
        <ul>
			<li>
                <a href="#"><img src="images/4.jpg" style="height: 160px ;" /></a>
            </li>
            <li>
                <a href="#"><img src="images/5.jpg" style="height: 160px ;"/></a>
            </li>
            <li>
                <a href="#"><img src="images/6.jpg" style="height: 160px ;"/></a>
            </li>
        </ul>
    </div>
</body>

</html>

 

上一篇:Wrap-组件


下一篇:微信小程序学习笔记一 + 小程序介绍 & 前置知识