jQuery产品分类滑动手风琴代码



63 251 84



特效描述:jQuery 产品分类 滑动手风琴代码,jQuery产品分类滑动手风琴代码

代码结构

1. 引入CSS

<link type="text/css"  rel="stylesheet" href="css/base.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>

3. HTML代码

<div class="indexTypes">
   <ul>
	   <li class="current">
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">****系列</a>
		   </div>
		   <div class="con fl" id="con11">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <li>
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">****系列</a>
		   </div>
		   <div class="con fl" id="con22">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <li>
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">*****系列</a>
		   </div>
		   <div class="con fl" id="con33">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <div class="clear"></div>
   </ul>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
	var currentLi =  $(".indexTypes ul li");
	$(currentLi.eq(0)).stop().animate({"width":"510px"},600);
	$(currentLi.eq(0)).children(".con").animate({"left":"193px"},600);
	$(currentLi).hover(function(e){
		$(this).siblings("li").stop().animate({"width":"193px"},600);
		$(this).siblings("li").removeClass("current");
		$(this).addClass("current");
		$(this).stop().animate({"width":"510px"},600);  
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 图片滑动 图片滑块 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到