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

Use jQuery to achieve website navigation jitter effect

angryTom
angryTomforward
2020-03-02 18:07:552467browse

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>

Run result

When the mouse is placed, it will Constant shaking
Use jQuery to achieve website navigation jitter effectUse 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 effectUse 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!

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