jQuery鼠標滑動tab選項卡切換效果代碼



106 421 141



特效描述:鼠標滑動 tab選項卡切換 切換效果,

代碼結構

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

2. HTML代碼

<!-- 代碼部分begin -->
<div class="tabbox">
	<div class="tab">
    	<a href="javascript:;" class="on">js特效</a>
        <a href="javascript:;">flash素材</a>
        <a href="javascript:;">亞當學院</a>
        <a href="javascript:;">在線客服代碼</a>
    </div>
    <div class="content">
    	<ul>
        	<li><p>js特效內容</p></li>
            <li><p>flash素材內容</p></li>
            <li><p>亞當學院內容</p></li>
            <li><p>在線客服代碼內容</p></li>
        </ul>
    </div>
</div>
<h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1>
<script>
$(function(){
	$('.tabbox .content ul').width(500*$('.tabbox .content li').length+'px');
	$(".tabbox .tab a").mouseover(function(){
		$(this).addClass('on').siblings().removeClass('on');
		var index = $(this).index();
		number = index;
		var distance = -500*index;
		$('.tabbox .content ul').stop().animate({
			left:distance
		});
	});
	var auto = 1;  //等于1則自動切換,其他任意數字則不自動切換
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.tabbox .tab a').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
			var distance = -500*number;
			$('.tabbox .content ul').stop().animate({
				left:distance
			});
		}
		var tabChange = setInterval(autotab,3000);
		//鼠標懸停暫停切換
		$('.tabbox').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.tabbox').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }  
});
</script>
<!-- 代碼部分end -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動選項卡 滑動切換 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

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