jquery-仿淘宝双11侧边栏的菜单特效（2014-10-31 ）

最近在天猫主页的右边栏上看到了一个特效，还不错，就仿制了一个，比原版的效果稍微多了点。

演示地址：http://itxiaoming.sinaapp.com/demo01/demo.html

原版特效：http://www.tmall.com/

本人不太会描述，所以直接上代码吧

<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>demo01</title><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="demo.js"></script>
</head>
<body><div class="menu"><div class="menu_b back1"></div><span>测试</span></div><div class="menu"><div class="menu_b back2"></div><span>测试</span></div><div class="menu"><div class="menu_b back3"></div><span>测试</span></div><div class="menu"><div class="menu_b back4"></div><span>测试</span></div><div class="menu"><div class="menu_b back5"></div><span>测试</span></div><div class="menu"><div class="menu_b back6"></div><span>测试</span></div>
</body>
</html>

上面的HTML有6个菜单栏，每个菜单栏左边默认显示是2PX宽度的色彩条

$(document).ready(function(){$(".menu").mouseover(function(){var div = $(this).children(".menu_b");div.stop(true,false).animate({width:'220px',opacity:'1'},400);div.animate({width:'180px',opacity:'1'},600);div.animate({width:'200px',opacity:'1'},500);});$(".menu").mouseout(function(){var div = $(this).children(".menu_b");div.stop(true,false).animate({width:'2px',opacity:'1'},500);div.animate({width:'20px',opacity:'1'},600);div.animate({width:'2px',opacity:'1'},500);});
});

当鼠标放上去的时候，2PX的色彩条的宽度加载到比菜单栏的多20PX，然后再弹回来比菜单栏的少20PX，然后再加载到跟菜单栏一样宽，这样有个弹性的加载效果。这里的宽度可以根据自己的审美观来修改，也可以再后面多加几个来回弹的特效，这样也许效果会显得更逼真些。离开的时候特效相反，一样的原理。

/* demo01 css */.menu{position: relative;width: 200px;height: 40px;background: #666;margin: 10px;
}.menu_b{position: absolute;width: 2px;height: 40px;background: red;z-index: 1px;
}
.menu span{position: inherit;display: block;text-align: center;line-height: 40px;z-index: 3px;font-family: "Microsoft Yahei";color: #FFF;cursor: pointer;
}
.back1{background: #FF0000;
}
.back2{background: #921AFF;
}
.back3{background: #00CACA;
}
.back4{background: #00DB00;
}
.back5{background: #FF5809;
}
.back6{background: #E1E100;
}

第一次在这里发表文章，有什么不足的地方或好的方法可以留言，我们可以互相学习，互相进步。然后希望能在这里结交更多志同道合的朋友。谢谢观看，源码奉上。

jquery-仿淘宝双11侧边栏的菜单特效（2014-10-31 ）相关推荐

jQuery仿淘宝鼠标悬停动画图标导航特效
jQuery仿淘宝鼠标悬停动画图标导航特效下载地址:jQuery仿淘宝鼠标悬停动画图标导航特效 http://www.sucaijiayuan.com/Js/DaoHangDaiMa/1462.ht ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
2021年淘宝双11跨店满减如何使用?
2021年淘宝双11跨店满减怎么使用? 前面小编赵一八笔记介绍了天猫双十一活动从几号开始到几号结束,双十一活动期间淘宝的商家也会上线促销活动,其中跨店满减是少不了的环节,大家知道今年淘宝双11满多少减 ...
一键自动完成 2021 京东/淘宝双 11 活动
苏生不惑第295篇原创文章,将本公众号设为星标,第一时间看最新文章. 之前分享过免费使用腾讯云每天定时签到京东领取京豆网易云音乐等级快速升级:每天自动打卡听歌300首签到获取脚本,再安装nodejs ...
淘宝双11大数据分析（数据准备篇）
文章目录前言数据内容分析 `user_log.csv`文件内容含义 `train.csv` 和 `test.csv` 文件内容含义数据上传到Linux系统并解压数据集的预处理文件信息截取导 ...
2021年淘宝双11超级红包规则介绍
2021年淘宝双11超级红包规则介绍一年一度的双十一购物狂欢节又要到了,每年天猫.淘宝.京东等电商平台都准备丰厚的红包福利送给大家,今年也依然丰厚.值得注意的是,今年的双十一比以往提前了4个小时,1 ...
性能第三讲：百万级QPS，支撑淘宝双11需要哪些技术
性能第三讲:百万级QPS,支撑淘宝双11需要哪些技术又到一年双11,相信大部分同学都曾经有这个疑问:支撑起淘宝双11这么大的流量,需要用到哪些核心技术?性能优化系列的第二篇我想跟大家探讨一下这个话题 ...
大数据系统开发综合实践(淘宝双11大数据批处理分析系统、NBA 、淘宝购物大数据实时展示、Spark GraphX)
cqupt || xmu--大数据系统开发综合实践代码放在了GitHub上链接 task01 大数据批处理系统淘宝双11大数据批处理分析系统 task02 大数据查询分析计算系统 NBA 统计大 ...

jquery-仿淘宝双11侧边栏的菜单特效（2014-10-31 ）

jquery-仿淘宝双11侧边栏的菜单特效（2014-10-31 ）相关推荐

最新文章

热门文章