jQuery產品分類滑動手風琴代碼



66 263 88



特效描述: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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表