jQuery手机触屏Tab选项卡特效代码下载

jQuery手机触屏Tab选项卡特效代码下载

1. 引入JS

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

2. HTML代码

<div class="find_nav">
    <div class="find_nav_left">
        <div class="find_nav_list" id="pagenavi1">
            <ul>
                <li><a href="#" class="active">每日更新</a></li>
                <li><a href="#">精品首推</a></li>
                <li><a href="#">时尚包包</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">运动品牌</a></li>
                <li><a href="#">香水化妆品</a></li>
                <li><a href="#">阿迪达斯</a></li>
                <li><a href="#">耐克</a></li>
                <li><a href="#">范思哲</a></li>
                <li><a href="#">古驰</a></li>
                <li class="sideline"></li>
            </ul>
        </div>
    </div>
</div>
<div id="slider1" class="swipe">
  <ul class="box01_list">
	<li class="li_list" style="background:#db7575">1</li>
	<li class="li_list" style="background:#75b140">2</li>
	<li class="li_list" style="background:#b16b40">3</li>
	<li class="li_list" style="background:#4053b1">4</li>
	<li class="li_list" style="background:#b14080">5</li>
	<li class="li_list" style="background:#4dd1b3">6</li>
	<li class="li_list" style="background:#bea30e">7</li>
	<li class="li_list" style="background:#865bb3">8</li>
	<li class="li_list" style="background:#69b03f">9</li>
	<li class="li_list" style="background:#c25e28">10</li>
  </ul>
</div>
<script type="text/javascript">
$(".find_nav_list").css("left",0);
$(".find_nav_list li").each(function(){
		$(".sideline").css({left:0});
		$(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
});
var nav_w=$(".find_nav_list li").first().width();
$(".sideline").width(nav_w);
$(".find_nav_list li").on('click', function(){
	nav_w=$(this).width();
	$(".sideline").stop(true);
	$(".sideline").animate({left:$(this).position().left},300);
	$(".sideline").animate({width:nav_w});
	$(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
	var fn_w = ($(".find_nav").width() - nav_w) / 2;
	var fnl_l;
	var fnl_x = parseInt($(this).position().left);
	if (fnl_x <= fn_w) {
		fnl_l = 0;
	} else if (fn_w - fnl_x <= flb_w - fl_w) {
		fnl_l = flb_w - fl_w;
	} else {
		fnl_l = fn_w - fnl_x;
	}
	$(".find_nav_list").animate({
		"left" : fnl_l
	}, 300);
});
var fl_w=$(".find_nav_list").width();
var flb_w=$(".find_nav_left").width();
$(".find_nav_list").on('touchstart', function (e) {
	var touch1 = e.originalEvent.targetTouches[0];
	x1 = touch1.pageX;
	y1 = touch1.pageY;
	ty_left = parseInt($(this).css("left"));
});
$(".find_nav_list").on('touchmove', function (e) {
	var touch2 = e.originalEvent.targetTouches[0];
	var x2 = touch2.pageX;
	var y2 = touch2.pageY;
	if(ty_left + x2 - x1>=0){
		$(this).css("left", 0);
	}else if(ty_left + x2 - x1<=flb_w-fl_w){
		$(this).css("left", flb_w-fl_w);
	}else{
		$(this).css("left", ty_left + x2 - x1);
	}
	if(Math.abs(y2-y1)>0){
		e.preventDefault();
	}
});
for(n=1;n<9;n++){
	var page='pagenavi'+n;
	var mslide='slider'+n;
	var mtitle='emtitle'+n;
	arrdiv = 'arrdiv' + n;
	var as=document.getElementById(page).getElementsByTagName('a');
	var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
		var as=document.getElementById(this.page).getElementsByTagName('a');
		as[this.p].className='';
		this.p=index;
		fnl_x =  parseInt($(".find_nav_list li").eq(this.p).position().left);
		nav_w=$(".find_nav_list li").eq(this.p).width();
		$(".sideline").stop(true);
		$(".sideline").animate({left:$(".find_nav_list li").eq(this.p).position().left},300);
		$(".sideline").animate({width:nav_w},100);
		$(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
		var fn_w = ($(".find_nav").width() - nav_w) / 2;
		var fnl_l;
		if (fnl_x <= fn_w) {
			fnl_l = 0;
		} else if (fn_w - fnl_x <= flb_w - fl_w) {
			fnl_l = flb_w - fl_w;
		} else {
			fnl_l = fn_w - fnl_x;
		}
		$(".find_nav_list").animate({
			"left" : fnl_l
		}, 300);
	}});
	tt.page = page;
	tt.p = 0;
	//console.dir(tt); console.dir(tt.__proto__);
	for(var i=0;i<as.length;i++){
		(function(){
			var j=i;
			as[j].tt = tt;
			as[j].onclick=function(){
				this.tt.slide(j);
				return false;
			}
		})();
	}
}
</script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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