</tit"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script src="/style/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/style/functions.js" type="text/javascript"></script>
<script src="/style/clist-time.js" type="text/javascript"></script>
</head>
<body>
<header id="indexHeader">
<div class="top_bar">
<div class="heade_m"><div class="refresh_title"></div></div>
<div class="heade_l"><a class="msg-box" href="/"><i class="iconfont icon-shouye-shouye"></i></a></div>
<div class="heade_r"><a href="javascript:;" class="btn search"><i class="iconfont icon-sousuo"></i></a></div>
</div>
<div class="top_menu_bar">
<div id="top_menu" class="top_menu_list" data-type="index" >
<ul class="nav flexy-menu orange">
<li class="navmore"></li>
<li class="hover"><a href="/">首页</a></li>
<li><a href="/zs/">知识</a></li><li><a href="/know/">知道</a></li><li><a href="/tags/jiekou.html" title="接口" draggable="false" target="_blank">接口</a></li>
<li><a href="/tags/chuliqi.html" title="处理器" draggable="false" target="_blank">处理器</a></li>
<li><a href="/tags/caozuo.html" title="操作" draggable="false" target="_blank">操作</a></li>
<li><a href="/tags/mingling.html" title="命令" draggable="false" target="_blank">命令</a></li>
<li><a href="/tags/xingneng.html" title="性能" draggable="false" target="_blank">性能</a></li>
<li><a href="/tags/shezhi.html" title="设置" draggable="false" target="_blank">设置</a></li>
<li><a href="/tags/zhineng2.html" title="智能" draggable="false" target="_blank">智能</a></li>
<li><a href="/tags/html.html" title="html" draggable="false" target="_blank">html</a></li>
<li><a href="/tags/shanchu.html" title="删除" draggable="false" target="_blank">删除</a></li>
<li><a href="/tags/zhiling.html" title="指令" draggable="false" target="_blank">指令</a></li>
</div>
</div>
<div class="wap-search">
<div class="search-form">
<form action="/e/search/index.php" method="post">
<input type="hidden" value="title,skey" name="show">
<div class="search-select">
<select name="classid">
<option value="1">全部</option>
</select>
</div>
<div class="search-fields">
<input type="text" class="" placeholder="搜索词..." autocomplete="off" value="" name="keyboard" required="">
<button class="" type="submit"><i class="iconfont icon-sousuo"></i></button>
</div>
</form>
</div>
<div class="popula-search-key"><span>热门：</span><a href="/tags/huawei.html" title="华为" draggable="false" target="_blank">华为</a><a href="/tags/zhichi.html" title="支持" draggable="false" target="_blank">支持</a><a href="/tags/canshu.html" title="参数" draggable="false" target="_blank">参数</a><a href="/tags/fenbianshuai.html" title="分辨率" draggable="false" target="_blank">分辨率</a><a href="/tags/jiojuefangfa.html" title="解决方法" draggable="false" target="_blank">解决方法</a><a href="/tags/kongzhi.html" title="控制" draggable="false" target="_blank">控制</a><a href="/tags/shuxing.html" title="属性" draggable="false" target="_blank">属性</a><a href="/tags/qidong.html" title="启动" draggable="false" target="_blank">启动</a><a href="/tags/shengji.html" title="升级" draggable="false" target="_blank">升级</a><a href="/tags/cuowu.html" title="错误" draggable="false" target="_blank">错误</a><a href="/tags/pingtai.html" title="平台" draggable="false" target="_blank">平台</a><a href="/tags/tuijian.html" title="推荐" draggable="false" target="_blank">推荐</a><a href="/tags/buzhou.html" title="步骤" draggable="false" target="_blank">步骤</a><a href="/tags/moshi.html" title="模式" draggable="false" target="_blank">模式</a><a href="/tags/chaxun.html" title="查询" draggable="false" target="_blank">查询</a><a href="/tags/yunxing.html" title="运行" draggable="false" target="_blank">运行</a><a href="/tags/kongjian.html" title="空间" draggable="false" target="_blank">空间</a><a href="/tags/wenjianjia.html" title="文件夹" draggable="false" target="_blank">文件夹</a><a href="/tags/shubiao.html" title="鼠标" draggable="false" target="_blank">鼠标</a><a href="/tags/tubiao.html" title="图标" draggable="false" target="_blank">图标</a><a href="/tags/zhongqi.html" title="重启" draggable="false" target="_blank">重启</a><a href="/tags/jihuo.html" title="激活" draggable="false" target="_blank">激活</a><a href="/tags/lianxiang.html" title="联想" draggable="false" target="_blank">联想</a><a href="/tags/jiancha.html" title="检查" draggable="false" target="_blank">检查</a><a href="/tags/zhuangtai.html" title="状态" draggable="false" target="_blank">状态</a><a href="/tags/yingyongchengxu.html" title="应用程序" draggable="false" target="_blank">应用程序</a></div>
</div>
</header>
<div class="content-wrap">
<div class="content">
<div class="article-container">
<header class="article-header">
<h1 class="article-title">jQuery如何实现网站导航抖动效果？（附代码）</h1>
<div class="article-meta">
<div class="meta-mus"><span><i class="iconfont icon-shijian"></i><p class="time_42121">2022-11-09 18:22:14</p><script>deal_time(42121,0);</script></span></div>
</div>
</header>
<article id='img' class="article-content">
jQuery如何实现网站导航抖动效果？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。</p><p><img src="/d/jc/2022092515/hfbgzycogbz10.webp"/></p><p><span style="font-size: 18px;"><strong>使用jQuery实现网站导航抖动效果</strong></span><br/></p><p><strong>知识点</strong></p><p>1、each遍历节点</p><p>2、 animate()自定义动画</p><p><strong>代码</strong></p><pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<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.webp") 0 -24px no-repeat;
margin: 10px auto;
}
</style>
</head>
<body>
<div>
<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>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 1. 展示图片
var $li = $('.box>ul>li');
$li.each(function (index, value) {
$(this).children('span').css({
'background': ' url("images/bg.webp") 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'
})
}
});
</script>
</body>
</html></pre><p><strong>运行结果</strong></p><p>鼠标放上后会不停抖动<br/></p><p><img src="/d/jc/2022092515/lrs23dczw3i10.webp" /></p><p><img src="/d/jc/2022092515/zsuwmnf4hu510.webp" /></p><p>更多<a href="http://127.0.0.1/d/jc/2022091710/0621378uxlj0ehb4ud" target="_blank">web前端</a>知识，请查阅 HTML中文网 ！！<p>以上就是jQuery如何实现网站导航抖动效果？（附代码）的详细内容，更多请关注易知道|edz.cc其它相关文章！</p></article>
<script>
window.onload=function(){
var imgs = document.getElementsByTagName('img');
for(var i = 0;imgs[i];i++){
var thttp = imgs[i].getAttribute('src').indexOf("http");
var tok = imgs[i].getAttribute('src').indexOf("//");
if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));}
}
}
</script>
<div class="entry-meta">
<div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/doudong.html" title="抖动" class="c1" target="_blank">抖动</a><a href="/tags/jiazhi.html" title="价值" class="c1" target="_blank">价值</a><a href="/tags/cankao.html" title="参考" class="c1" target="_blank">参考</a><a href="/tags/jiedian2.html" title="节点" class="c1" target="_blank">节点</a><a href="/tags/zidingyidonghua.html" title="自定义动画" class="c1" target="_blank">自定义动画</a></div>
</div>
</div>
<div class="relatebox">
<div class="relatebox-lists">
<h3>推荐阅读<span></span></h3>
<div class="relatebox-articles">
<ul>
<article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc43.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/81.webp" alt="足球彩票的快乐总体偏好价值目标颜色过滤软件免费试用" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc43.html" title="足球彩票的快乐总体偏好价值目标颜色过滤软件免费试用">足球彩票的快乐总体偏好价值目标颜色过滤软</a></h2>
</div>
<p class="text-muted meta">足球彩票的快乐总体偏好价值目标颜色过滤软件免费试用，，快乐彩票快乐目标颜色的强大，最新升级操作简单，为了使电脑不了解的用户也能操作自如</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lctp.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/92.webp" alt="2010年底DIY硬件总结和安装参考" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lctp.html" title="2010年底DIY硬件总结和安装参考">2010年底DIY硬件总结和安装参考</a></h2>
</div>
<p class="text-muted meta">2010年底DIY硬件总结和安装参考，，它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天，但看看当年的内容是真的走了，如果</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lcmz.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/18.webp" alt="cad怎么设置节点|CAD怎么加节点" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lcmz.html" title="cad怎么设置节点|CAD怎么加节点">cad怎么设置节点|CAD怎么加节点</a></h2>
</div>
<p class="text-muted meta">cad怎么设置节点|CAD怎么加节点，，1. CAD怎么加节点天正CAD软件画节点的方法：1、在打开的软件中点击左侧工具栏中的图块图案-通用图库。2、</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lck0.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/17.webp" alt="保存硬盘上的数据，谁更有价值" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lck0.html" title="保存硬盘上的数据，谁更有价值">保存硬盘上的数据，谁更有价值</a></h2>
</div>
<p class="text-muted meta">保存硬盘上的数据，谁更有价值，，常用的数据存储方式有两种：硬盘和光盘。用户或多或少对自己说，好的有很多人。争了，不知道你是否有账户的账号，两</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/LcaK.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/94.webp" alt="499元的变压器hd6570铭瑄低端价值选择的视频推荐" /></span></a></p>
<div class="title">
<h2><a href="/zs/LcaK.html" title="499元的变压器hd6570铭瑄低端价值选择的视频推荐">499元的变压器hd6570铭瑄低端价值选择的视</a></h2>
</div>
<p class="text-muted meta">499元的变压器hd6570铭瑄低端价值选择的视频推荐，， 6月13日电脑城最新看点：近日，铭瑄新卡旗下这款主打入门级市场的HD6570变形金刚全面开卖</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/LbLJ.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/13.webp" alt="新建参考线快捷键|新建参考线快捷键Mac电脑" /></span></a></p>
<div class="title">
<h2><a href="/zs/LbLJ.html" title="新建参考线快捷键|新建参考线快捷键Mac电脑">新建参考线快捷键|新建参考线快捷键Mac电脑</a></h2>
</div>
<p class="text-muted meta">新建参考线快捷键|新建参考线快捷键Mac电脑，，新建参考线快捷键Mac电脑ps前景色填充快捷键是Alt+Delete。1、打开ps，点击新建，创建2、点击左</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lb6f.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/25.webp" alt="取消参考线快捷键|取消参考线快捷键怎么设置" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lb6f.html" title="取消参考线快捷键|取消参考线快捷键怎么设置">取消参考线快捷键|取消参考线快捷键怎么设</a></h2>
</div>
<p class="text-muted meta">取消参考线快捷键|取消参考线快捷键怎么设置，，1. 取消参考线快捷键怎么设置在PS工作界面，选择上方菜单栏中的【视图】，在打开的菜单中选择下</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lb11.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/91.webp" alt="海龙节点快捷键|海龙工具快捷键" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lb11.html" title="海龙节点快捷键|海龙工具快捷键">海龙节点快捷键|海龙工具快捷键</a></h2>
</div>
<p class="text-muted meta">海龙节点快捷键|海龙工具快捷键，，1. 海龙工具快捷键惠普笔记本电脑的优点：1、 品牌：这年头买任何东西都要涉及这样一个问题，很多人购买东西都</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/LbuH.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/64.webp" alt="谁是最好的价值500元" /></span></a></p>
<div class="title">
<h2><a href="/zs/LbuH.html" title="谁是最好的价值500元">谁是最好的价值500元</a></h2>
</div>
<p class="text-muted meta">谁是最好的价值500元，，测试总结和购买建议： CPU性能，Phenom II X4 955领先遥遥领先 我们总结了前面的CPU性能测试成绩与实际游戏测试与f</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/LbsP.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/5.webp" alt="19英寸/22英寸宽屏更有价值" /></span></a></p>
<div class="title">
<h2><a href="/zs/LbsP.html" title="19英寸/22英寸宽屏更有价值">19英寸/22英寸宽屏更有价值</a></h2>
</div>
<p class="text-muted meta">19英寸/22英寸宽屏更有价值，，两种流行LCD现状及未来趋势 2006宽屏后；的洗礼，宽屏液晶显示器已经成为市场的主要力量，这是一个不争的事实。这</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lbh9.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/45.webp" alt="在高价值笔记本的推荐下，什么笔记本看起来不错" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lbh9.html" title="在高价值笔记本的推荐下，什么笔记本看起来不错">在高价值笔记本的推荐下，什么笔记本看起来不</a></h2>
</div>
<p class="text-muted meta">在高价值笔记本的推荐下，什么笔记本看起来不错，，三天小长假，厂家都憋足了劲促销，很多产品都是第一SNB平台清仓。特别是，GeForce 500m系列和高</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/LaHr.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/46.webp" alt="高成本5000元保存最有价值游戏平台" /></span></a></p>
<div class="title">
<h2><a href="/zs/LaHr.html" title="高成本5000元保存最有价值游戏平台">高成本5000元保存最有价值游戏平台</a></h2>
</div>
<p class="text-muted meta">高成本5000元保存最有价值游戏平台，，一般来说，高性能的产品也有很高的价格，用户将不得不付出巨大代价来保存一套强大的配置。然而，这次与以往</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/La64.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/17.webp" alt="785g先锋AMD主板在集成领域的价值导向" /></span></a></p>
<div class="title">
<h2><a href="/zs/La64.html" title="785g先锋AMD主板在集成领域的价值导向">785g先锋AMD主板在集成领域的价值导向</a></h2>
</div>
<p class="text-muted meta">785g先锋AMD主板在集成领域的价值导向，，9月1日是课余时间主要的中学，许多学生都会利用开放玩家机会救主人，和Athlon 2和785g主板搭配无疑是</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/La3s.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/35.webp" alt="2500元价值小于家用电脑配置推荐蛇" /></span></a></p>
<div class="title">
<h2><a href="/zs/La3s.html" title="2500元价值小于家用电脑配置推荐蛇">2500元价值小于家用电脑配置推荐蛇</a></h2>
</div>
<p class="text-muted meta">2500元价值小于家用电脑配置推荐蛇，，新的一年是蛇年已经开始了，我相信很多年轻的朋友有很多红包和压岁钱，对于没有电脑的朋友，可以在红包内开</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/KYS3.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030418/qkoxq1rw3gm21.webp" alt="wps删除自定义动画效果|在WPS中去除PPT的动画效果" /></span></a></p>
<div class="title">
<h2><a href="/zs/KYS3.html" title="wps删除自定义动画效果|在WPS中去除PPT的动画效果">wps删除自定义动画效果|在WPS中去除PPT的动</a></h2>
</div>
<p class="text-muted meta">wps删除自定义动画效果|在WPS中去除PPT的动画效果，自定义,删除,效果,动画，1.如何在WPS中去除PPT的动画效果以WPS 2019版为例第一种方法：选</p>
</article></ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p>
<p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p>
</footer>
</body>
</html>