前端插件之头部tab栏左右滑动

效果图：

1.css部分

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
	<style type="text/css">
		*{margin: 0; padding: 0; box-sizing: border-box; }
		html,body{width: 100%; overflow: hidden;} 
		ul{width: auto;  list-style: none; height: 65px;}
		li{float: left; height: 65px;width: 105px; border: 1px solid #C2C2C2; text-align: center;color: #C2C2C2;
			line-height: 65px; margin-right: 10px;border-radius: 5px;}
		#contentNav{ width:100%; overflow: hidden;margin-left: 5%;}
		.font-red{color: #FFFFFF; background: blue;}
	</style>

2.html部分

<div id="contentNav">
		<ul id="contentNavul">
			<li class="font-red">演讲者模式</li>
			<li>声控模式</li>
			<li>固定画面模式</li>
			<li>轮播图模式</li>
			<li>模式1</li>
			<li>模式2</li>
			<li>模式3</li>
		</ul>
	</div>

3.最主要的是js部分，

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
	var hg = window.screen.width;
	var contentNav = document.getElementById("contentNav");
	contentNav.style.width = (hg*0.9) +'px';
	
	var contentNavul = document.getElementById("contentNavul");
	var ali = contentNavul.getElementsByTagName('li');
	contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';
	
	function Slide(){
		this.windowWidth = window.screen.width;//屏幕的宽度
		this.divWidth = 0;//每个div宽度
		this.resPlaceX = 0;//最终的位置X
		this.moveDistance = 0;//移动的距离
		this.startTranform = 0;//当前的transform值
 		this.startTranformStr = ''//transform字符串
 		this.translate3dX = 0;//每次算到的ul移动translate3dX值
 		this.disX = 0;//当前div距离屏幕左边距离
		this.startX = 0;//触摸开始的x值
	}

	/*--------------------获取当前transfrom-----------------------------*/
	Slide.prototype.getTransfrom = function(){
		this.startTranformStr = contentNavul.style.transform;
  		this.startTranform = this.startTranformStr.slice(this.startTranformStr.indexOf('(') + 1,
  												this.startTranformStr.indexOf('px'));
  		if (this.startTranform == '') {this.startTranform = 0};
  		this.startTranform = parseFloat(this.startTranform); 
	}

	/*--------------------改变当前div到中间-----------------------------*/
	Slide.prototype.changeActive = function(myIndex){
		this.disX = $('li').eq(myIndex).offset().left;//当前div距离屏幕左边距离
		this.divWidth = $('li').eq(myIndex).width();
		this.resPlaceX = (this.windowWidth - this.divWidth) / 2;
		this.moveDistance = this.disX - this.resPlaceX; 
		this.getTransfrom();
  		this.translate3dX = this.startTranform + -this.moveDistance
		this.boundaryCondition();
		$('ul').css({
	  		'transform' : 'translate3d('+ this.translate3dX +'px,0,0)',
	  		'transition-duration' : '1s'
  		});
	}
	
	/*------------------------边界限制-----------------------------------*/
	Slide.prototype.boundaryCondition = function(){
		if(this.translate3dX > 0){
			this.translate3dX = 0;
		}else if(-this.translate3dX > $('ul').width() - this.windowWidth + hg*0.1 -10){
			this.translate3dX = -($('ul').width() - this.windowWidth + hg*0.1 -10);
		}
	}

	var slide = new Slide();

	$('li').on('click',function(){
		$('li').removeClass('font-red');
		$(this).addClass('font-red');
		slide.changeActive($(this).index());
	});  

	$('ul').on('touchstart',function(e){
		$('ul').css({'transition-duration' : '0s'});
		slide.getTransfrom();
		var touchestartEv = e || event; 
		slide.startX = touchestartEv.touches[0].clientX;
		
	});
	
	$('ul').on('touchmove',function(ev){
		var touchmoveEv = ev || event;
		var moveX = touchmoveEv.touches[0].clientX;;
		var translateX = slide.startX - moveX;
		slide.translate3dX = slide.startTranform + -translateX; 
		slide.boundaryCondition();
		console.log(slide.startTranform)
		$('ul').css({
			'transform' : 'translate3d('+ slide.translate3dX +'px,0,0)'
		})
	});
</script>