jQuery鼠标滑动tab选项卡切换效果代码



103 409 137



特效描述:鼠标滑动 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

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