Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web-js tutoriel-php.cn

Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web

angryTom

Libérer： 2020-03-02 18:07:55

avant

2538 Les gens l'ont consulté

Cet article présente la méthode d'utilisation de jQuery pour obtenir l'effet de gigue de la navigation sur un site Web. Il utilise principalement chaque nœud de traversée et anime une animation personnalisée. J'espère que cela sera utile aux amis qui apprennent jQuery !

Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web

Utiliser jQuery pour obtenir un effet de gigue de navigation sur un site Web

Points de connaissances

1 . chacun traverse les nœuds

2. animation personnalisée animate()

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>

Copier après la connexion

résultat d'exécution

apparaîtra lorsque la souris est placé Continue de trembler
Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web

            // 停止抖动
            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>

Copier après la connexion

Résultat d'exécution

La souris continuera de trembler après l'avoir placée
Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web

Cet article est issu de la rubrique tutoriel js , bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!