Maison > Article > interface Web > Utilisez jQuery pour obtenir un effet de gigue de navigation sur le site Web

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

angryTomavant: 2020-03-02 18:07:552499parcourir

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 !

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>

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>

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!

jquery JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Conseils pour le débogage de Chrome dans le développement front-endArticle suivant：Conseils pour le débogage de Chrome dans le développement front-end

Articles Liés

Voir plus