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

最新推荐文章于 2022-10-14 20:07:44 发布

leietal

最新推荐文章于 2022-10-14 20:07:44 发布

阅读量372

点赞数

分类专栏： jquery 每日一特效文章标签： jquery 特效 ViewUI

jquery 每日一特效专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在菜单栏中实现动态特效的方法，包括HTML、CSS和JavaScript的使用，通过代码演示了如何使菜单栏在鼠标悬停时产生弹性加载效果，并提供了源码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

演示地址：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;
}

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