jquery写的一个特效,仿淘宝双11侧边栏的菜单
最近在天猫主页的右边栏上看到了一个特效,还不错,就仿制了一个,比原版的效果稍微多了点。
?
演示地址:http://itxiaoming.sinaapp.com/demo01/demo.html
?
?
本人不太会描述,所以直接上代码吧
?
<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; }
?
第一次在这里发表文章,有什么不足的地方或好的方法可以留言,我们可以互相学习,互相进步。然后希望能在这里结交更多志同道合的朋友。谢谢观看,源码奉上。
?
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。