jQuery特效：实现网站导航抖动效果

知识点

each遍历节点
animate()自定义动画

代码

<!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><div 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></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.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'})}});
</script>
</body>
</html>

运行结果

鼠标放上后会不停抖动

jQuery特效：实现网站导航抖动效果相关推荐

【jQuery笔记Part3】02-jQuery抖动效果
jQuery抖动效果雪碧图(精灵图) 什么是雪碧图? 使用雪碧图的目的显示雪碧图的条件静态页面展示图片抖动效果 jQuery笔记目录雪碧图(精灵图) 什么是雪碧图? 雪碧图是根据CSS s ...
jQuery:仿MSN网站的tab效果
今天不知怎的,一直在做tab的特效,看到MSN官网的tab效果不错,就花了一点点时间小做了一下,具体效果:如下 html代码: <div class="popular"> ...
使用JQuery实现淘宝导航栏效果
我们要实现一个淘宝导航栏的效果,先看一下运行效果要实现这个效果的话我们第一步首先要 1.div布局设id <div id="context"><div id= ...
jquery回弹_jQuery实现导航回弹效果
效果图: 代码如下: *{margin:0;padding:0;} .box{width:1100px ;height: 70px;margin: 100px auto;background: hot ...
推荐5个应用 jQuery 特效的精美网站
jQuery 在现在的 Web 开发项目中扮演着重要角色,借助 jQuery 可以让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.今天这篇文章向大家分享5个应用 jQuery 的精美网 ...
php无限分类之网站导航
php无限分类也可以实现网站导航的效果,例如1688的官网头部导航: 测试数据: const arr = [['id' => 1, 'pid' => 0, 'city' => '江西 ...
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下 ...
html怎么把图片做成抖动效果,CSS图片抖动和JS点击特效
正文 CSS图片抖动效果代码,放在网站主要CSS文件中即可如:style.css,之前emlog博客中常添加这个效果 img:hover { -webkit-animation:sucaijiayu ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
网站导航栏如何设置更利于提升SEO优化效果？
网站导航栏就像是用户浏览网站的"指南针",能够方便访客更直观的了解自己所在的位置,也能让访客更快速的找到想要了解的栏目.那么,导航栏该如何设置才能更利于SEO优化效果提升呢? 1. ...

jQuery特效：实现网站导航抖动效果

知识点

代码

运行结果

jQuery特效：实现网站导航抖动效果相关推荐

最新文章

热门文章