Use jQuery to achieve website navigation jitter effect-JS Tutorial-php.cn

Use jQuery to achieve website navigation jitter effect

angryTom

Release： 2020-03-02 18:07:55

forward

2504 people have browsed it

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!

Use jQuery to achieve website navigation jitter effect

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>

Copy after login

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>

Copy after login

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!