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

Love The Way You Lie 2022-06-08 20:45 414阅读 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 条评论，414人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 325 阅读

相关头部搜索栏

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

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

相关 HTML实现的Tab切换效果，点击滑动和触控滑动（SlideTouch插件）

> 在移动端的开发中，很多时候需要用手指实现滑动切换Tab的效果，相比于点击的体验效果更好，本文就在SlideTouch这个插件中提取了一个比较好的效果。可以使用Chrome直

骑猪看日落/ 2022年02月27日 14:42/ 0 赞/ 408 阅读

相关【转载】移动开发中的上下左右滑动插件jquery.swipe.js

原文地址http://blog.csdn.net/pvfhv/article/details/3449803/\ 源码： (function($) {

r囧r小猫/ 2021年09月30日 07:50/ 0 赞/ 376 阅读