井井客

搜索

JQ自制手机端横向标题滚动切换选项卡

自制的一段JQ滚动选项卡代码,下面的内容关联的是当前正中间的标题,点标题两端文字可以左右切换,另外可以加上左右按钮样式模拟也可滚动出点按钮滚动选项卡。

JQ自制手机端横向标题滚动切换选项卡

用Jq做的一个比较简单的标题滚动选项卡,然后自己稍微封装做成了一个函数~第一次做封装,不知道是不是做到这一步就可以了,先贴上代码,欢迎指正~

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ自制手机端横向标题滚动切换选项卡</title>
<style>
body,div,h2 { margin:0; padding:0;}
.warp { width:600px; margin:20px auto 0; border:1px solid #eee; overflow:hidden;}
.wTit { height:50px; padding-bottom:8px; overflow:hidden; }
.wTit h2 { float:left; width:200px; font:normal 16px/48px 'Microsoft Yahei'; color:#999; text-align:center; border-bottom:2px solid #eee; position:relative; cursor:pointer; }
.wTit h2.on { font-size:20px; color:#333; border-color:#036;}
.wTit h2.on:after { position:absolute; top:50px; left:50%; width:0px; height:0px; margin-left:-8px; border:solid 8px; border-color:#036 #fff #fff #fff;content: "";}
.wCon { padding:20px;}
</style>
</head>
<body>
<div class="warp">
    <div class="wTit">
    	<h2>标题1<i></i></h2>
        <h2>标题2</h2>
        <h2>标题3</h2>
        <h2>标题4</h2>
    </div>
    <div class="wCon">
    	<div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>
<script src="http://www.jingjingke.com/res/js/jquery-1.12.4.min.js"></script> 
<script>
function srcollTabTit(tit,con){
	//头部的包裹尺寸
	var warpWidth = $(tit).parent().width();
	//因为下面会复制四份,实际总长需像下面这样来计算
	var allWidth = $(tit).children().length*5*warpWidth*0.3333;
	//初始化
	var warpLeft = 0;
	var getNum = 0;
	var cont = '';
	//给每个头部子元素添加对应的data-name,值为索引号
	$(tit).children().each(function(){
        $(this).attr('data-name',$(tit).children().index(this));

    });	
	//将头部内容复制四份并添加在头部里面避免当头部子元素个数不够时动画不连贯
	cont =  $(tit).clone(true);
	for(i=1;i<5;i++){
		cont.children().clone(true).prependTo(tit);
	}
	//设置头部子元素尺寸为包裹尺寸的三分之一
	$(tit).children().width(warpWidth*0.3333);
	//为了连贯,所以将子元素的最后两个拿到前面
	$(tit).children(':last').prependTo(tit);
	$(tit).children(':last').prependTo(tit);
	//将第三个元素(实际为原始的第一个元素)添加样式on,然后将内容的第一个子元素显示其它隐藏,并且把整个头部向右平移一个子元素的宽度
	$(tit).children().eq(2).addClass('on');	
	$(con).children().eq(0).fadeIn().siblings().hide();
	$(tit).width(allWidth).animate({'marginLeft':'-' + warpWidth*0.3333 + 'px'});
	//当头部子元素点击的时候
	$(tit).children().click(function(){
		//获取元素距离左边的值
		warpLeft = $(tit).css('marginLeft');
		//获取当前元素的data-name的值-即原始的索引值
		getNum = $(this).data('name');
		//获取内容的第X个(上一句中的获取的索引)子元素显示,并将它的同胞隐藏
		$(con).children().eq(getNum).fadeIn().siblings().hide();
		//判断是点击的左边还是右边,如果当前元素下一个元素拥有on样式则...,如果是上一个元素拥有on样式则...
		if($(this).next().hasClass('on')){
			$(this).addClass('on').siblings().removeClass('on');
			titScroll(tit,warpWidth*0.3333,'last');
		}else if($(this).prev().hasClass('on')){
			$(this).addClass('on').siblings().removeClass('on');
			titScroll(tit,-warpWidth*0.3333,'first');
		}
	});
	
	function titScroll(obj,width,site){ 
		if(site === 'first'){
			$(obj).animate({ 
					marginLeft: width*2 + "px" 
			},600,function(){ 
					if(site === 'first') $(this).css('marginLeft',width + 'px').find('h2:first').appendTo(this);
			});
	
		}else if(site === 'last'){
			$(obj).animate({ 
					marginLeft: "0px" 
			},600,function(){ 
					if(site === 'last') $(this).css('marginLeft','-' + width + 'px').find('h2:last').prependTo(this);
			});
		}   
	} 	
}

srcollTabTit('.wTit','.wCon');

</script>
</body>
</html>

中间有很多注释,代码本身应该不是很复杂,因为是用JQ写的,少了很多不必要的东西。效果图如下:

JQ自制手机端横向标题滚动切换选项卡效果

说说代码的内容,因为点击切换内容这个是比较简单的,主要说的还是头部滚动。
1、让标题变成三等份,做了一些相应尺寸的设置和获取
2、给每个标题添加自定义属性data-name并将索引号对应赋值
3、因不清楚标题个数,而达到滚动连贯最少需要5个标题,所以统一将标题复制4份
4、让第一个索引为0的标题移到中间位置并添加on样式,突出展示
5、两端标题点击时的一些操作与判断和选择卡切换效果,外边新增了一个函数,用以判断传递点击的标题位置,并做相应左滚动或右滚动的效果。

滚动选项卡就基本完成了~

文章TAG:JQ

作者:井井客原创来源:原创
本文标题:JQ自制手机端横向标题滚动切换选项卡
本文链接:http://www.jingjingke.com/c/12123.html

上一篇:CSS3之rem初体验
下一篇:纯css边框三角形

文章分类

相关阅读

随便看看