Home >Web Front-end >JS Tutorial >Use jQuery to achieve website navigation jitter effect

Use jQuery to achieve website navigation jitter effect

angryTomforward: 2020-03-02 18:07:552528browse

This article introduces the method of using jQuery to achieve the jitter effect of website navigation. It mainly uses each traversal node and animate custom animation. I hope it will be helpful to friends who are learning jQuery!

Using jQuery to achieve website navigation jitter effect

Knowledge points

1. each traverses nodes

2, animate() custom animation

Code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            width: 350px;
            height: 350px;
            margin: 100px auto;
            cursor: pointer;
        }
        .box ul li {
            float: left;
            width: 80px;
            height: 80px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
            margin: 2px;
        }
        .box>ul>li>span {
            display: block;
            width: 24px;
            height: 24px;
            background: url("images/bg.png") 0 -24px no-repeat;
            margin: 10px auto;
        }
    </style></head><body>
    <p class="box">
        <ul>
            <li><span></span>百度</li>
            <li><span></span>淘宝</li>
            <li><span></span>新浪</li>
            <li><span></span>网易</li>
            <li><span></span>搜狐</li>
            <li><span></span>腾讯</li>
            <li><span></span>优酷</li>
            <li><span></span>京东</li>
        </ul>
    </p><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">
    $(function () {
        // 1. 展示图片
        var $li = $(&#39;.box>ul>li&#39;);
        $li.each(function (index, value) {
            $(this).children(&#39;span&#39;).css({
                &#39;background&#39;: &#39; url("images/bg.png") 0 -&#39; + index * 24 + &#39;px no-repeat&#39;
            })
        });

        // 2. 抖动动画
        $li.hover(function () {
            shake(this);
        }, function () {
            // 停止抖动
            stopShake(this);
        });


        function shake(ele) {
            // 1. 设置css
            $(ele).css({
               &#39;position&#39;: &#39;relative&#39;
            });

            // 2. 确定走动的值
            var animateLeft = $(ele).css(&#39;left&#39;) === &#39;10px&#39; ? &#39;-10px&#39; : &#39;10px&#39;;
            $(ele).animate({
                left: animateLeft            }, 100, function () {
                shake(ele);
            });
        }

        function stopShake(ele) {
            $(ele).stop(true, false).css({
                left: &#39;0&#39;
            })
        }
    });</script></body></html>

Run result

When the mouse is placed, it will Constant shaking
Use jQuery to achieve website navigation jitter effect

            // 停止抖动
            stopShake(this);
        });


        function shake(ele) {
            // 1. 设置css
            $(ele).css({
               &#39;position&#39;: &#39;relative&#39;
            });

            // 2. 确定走动的值
            var animateLeft = $(ele).css(&#39;left&#39;) === &#39;10px&#39; ? &#39;-10px&#39; : &#39;10px&#39;;
            $(ele).animate({
                left: animateLeft            }, 100, function () {
                shake(ele);
            });
        }

        function stopShake(ele) {
            $(ele).stop(true, false).css({
                left: &#39;0&#39;
            })
        }
    });</script></body></html>

Run result

The mouse will keep shaking after placing it
Use jQuery to achieve website navigation jitter effect

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Use jQuery to achieve website navigation jitter effect. For more information, please follow other related articles on the PHP Chinese website!

jquery JS

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Tips for Chrome debugging in front-end developmentNext article：Tips for Chrome debugging in front-end development

See more

Use jQuery to achieve website navigation jitter effect

Related articles