使用jQuery实现网站导航抖动效果

本篇文章介绍了使用jquery实现网站导航抖动效果的方法,主要用到了each遍历节点和animate自定义动画,希望对学习jquery的朋友有帮助!

使用jQuery实现网站导航抖动效果

使用jQuery实现网站导航抖动效果

知识点

1、each遍历节点

2、 animate()自定义动画

代码

nbsp;html>                    * {            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;        }        

        

登录后复制            百度            淘宝            新浪            网易            搜狐            腾讯            优酷            京东             $(function () { // 1. 展示图片 var $li = $('.box>ul>li'); $li.each(function (index, value) { $(this).children('span').css({ 'background': ' url(“images/bg.png”) 0 -' + index * 24 + 'px no-repeat' }) }); // 2. 抖动动画 $li.hover(function () { shake(this); }, function () { // 停止抖动 stopShake(this); }); function shake(ele) { // 1. 设置css $(ele).css({ 'position': 'relative' }); // 2. 确定走动的值 var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px'; $(ele).animate({ left: animateLeft }, 100, function () { shake(ele); }); } function stopShake(ele) { $(ele).stop(true, false).css({ left: '0' }) } });

运行结果

鼠标放上后会不停抖动
在这里插入图片描述在这里插入图片描述

            // 停止抖动            stopShake(this);        });        function shake(ele) {            // 1. 设置css            $(ele).css({               'position': 'relative'            });            // 2. 确定走动的值            var animateLeft = $(ele).css('left') === '10px' ? '-10px' : '10px';            $(ele).animate({                left: animateLeft            }, 100, function () {                shake(ele);            });        }        function stopShake(ele) {            $(ele).stop(true, false).css({                left: '0'            })        }    });

登录后复制

以上就是使用jQuery实现网站导航抖动效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2729107.html

(0)
上一篇 2025年3月8日 00:03:55
下一篇 2025年2月25日 17:15:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论