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

Love The Way You Lie 2022-06-08 20:45 428阅读 0赞

效果图：

![20170901133831094][]

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>

[20170901133831094]: /images/20220609/6ae6842b9b2f4ac1b9a6c087672d9595.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关利用ViewPager实现可左右滑动的Action Tab

1. ViewPager要点： ViewPager 是一个布局管理类（layout manager），用于提供页面的左右滑动功能，类似于ListVi

灰太狼/ 2024年02月17日 15:56/ 0 赞/ 2 阅读

相关模拟淘宝/支付宝——实现tab栏左右拖动，进度条同步滑动距离

![20191229171714336.png][] html <div class="boxtab" ref="navTabItems" @touchmove="slid

小咪咪/ 2023年06月25日 14:28/ 0 赞/ 25 阅读

相关 mui tab点击切换滑动内容页面左右滑动效果

示例代码如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <

爱被打了一巴掌/ 2022年11月26日 08:45/ 0 赞/ 215 阅读

相关 Vue实现tab导航栏，支持左右滑动

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab

我就是我/ 2022年10月10日 11:13/ 0 赞/ 143 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 224 阅读

相关小程序--微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果： ![d80967

约定不等于承诺〃/ 2022年10月06日 00:58/ 0 赞/ 20 阅读

相关 jQuery选项卡滑动门Tabs插件

[下载地址/images/20220828/8d4b0db7bc9b4b73abc30ed44d314b7a.png![icon-default.png?t=L892][ico

灰太狼/ 2022年09月11日 04:09/ 0 赞/ 240 阅读

相关原生js写头部tab栏左右滑动支持移动端

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的； 1.css {margin: 0; padding: 0; box-sizin

ゝ一世哀愁。/ 2022年06月09日 08:55/ 0 赞/ 305 阅读

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

效果图： ![20170901133831094][] 1.css部分 <meta name="viewport" content="width=devic

Love The Way You Lie/ 2022年06月08日 20:45/ 0 赞/ 429 阅读

相关头部搜索栏

效果： ![2019032116080598.png][] 源码： <template> <div> <headers title="

我会带着你远行/ 2022年03月01日 03:20/ 0 赞/ 274 阅读