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

ゝ一世哀愁。 2022-06-09 08:55 305阅读 0赞

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的；

1.css

*{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;list-style:none}
    			html,body{width: 100%; overflow: hidden;} 
    			#contentNav{width: 100%;margin-left:20px;height: 67px;overflow: hidden;}
    			#contentNavul {height: 100%;transition: all ease 0s;}
    			#contentNavul li{float: left;height: 65px;width: 105px; border: 1px solid #CCCCCC; text-align: center;
    				color: #CCCCCC;line-height: 65px; margin-right: 10px;border-radius: 5px;font-size: 14px;}
    			#contentNavul li.selected{background: blue;color: #FFFFFF}

2.html

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

3.原生js

var hg = window.screen.width;
    			var contentNav = document.getElementById("contentNav");
    			contentNav.style.width = (hg-40) +'px';
    			
    			var contentNavul = contentNav.getElementsByTagName('ul')[0];
    			var ali = contentNavul.getElementsByTagName('li');
    			contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';
    			
    			for (var i=0;i<ali.length;i++) {
    				ali[i].index=i;
    				ali[i].οnclick=function(){
    					for (var j=0;j<ali.length;j++) {
    						ali[j].className="";
    					}
    					ali[this.index].className="selected";
                                            tocenter(this.index); 
    			};
    			
                            function tocenter(index){
                    var disX = ali[index].offsetLeft;//当前div距离屏幕左边距离
                    var divWidth = ali[index].offsetWidth;
                    var resPlaceX = (hg - divWidth) / 2;
                    var moveDistance = disX - resPlaceX; 
                    var a=getmarginleft(contentNavul.style.marginLeft);
                      var translateX = a + -moveDistance;
                      console.log(translateX)
                    var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
                    if(translateX > 0){
                        translateX = 0;
                    }
                    if(translateX < 0){
                        if(-translateX > maxleft){
                            translateX = -maxleft;
                        }else{
                            translateX = translateX;
                        }
                    }
                    contentNavul.style.marginLeft = translateX  +"px";
                    
                   }
    
    			function getmarginleft(a){
    				a=a.slice(a.indexOf('(') + 1,a.indexOf('px'));
    		  		if (a == '') {a = 0};
    		  		a= parseFloat(a); 
    		  		return a;
    			}
    			var startX=0;
    			var a=0;
    			contentNavul.ontouchstart=function(e){
    				var touchestartEv = e || event; 
    				startX = touchestartEv.touches[0].clientX;
    				a=getmarginleft(contentNavul.style.marginLeft);
    			}
    			
    			contentNavul.ontouchmove=function(ev){
    				var touchmoveEv = ev || event;
    				var moveX = touchmoveEv.touches[0].clientX;;
    				var translateX =startX - moveX - a;
    				var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
    				if(translateX > maxleft){
    					translateX = maxleft;
    				}
    				if(translateX < 0){
    					translateX = 0;
    				}
    				console.log(translateX);
    				contentNavul.style.marginLeft = "-" + translateX  +"px";
    			}

发表评论取消回复

表情：

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

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

相关阅读

相关可滑动移动端tab选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

川长思鸟来/ 2022年12月08日 04:48/ 0 赞/ 234 阅读

相关 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 阅读

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

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

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

相关移动端网页纯原生js选项卡tab切换

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vie

太过爱你忘了你带给我的痛/ 2022年06月09日 08:42/ 0 赞/ 234 阅读

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

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

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

相关移动端上下左右滑动事件

注意：要用on方法 $(".activity\_goods").on("touchstart",'.activity\_goods\_left',function(e) \{

浅浅的花香味﹌/ 2022年05月15日 08:27/ 0 赞/ 341 阅读

相关原生 JS 实现移动端 Touch 滑动反弹

什么是 `Touch`滑动？就是类似于 `PC`端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 `Touch`事件结合 `js`去实现，效果如下： ![154763

短命女/ 2022年01月29日 20:21/ 0 赞/ 281 阅读

相关移动端手写tab栏

Demo 使用Vue.js实现 -------------------- javascript new Vue({ el: "a

骑猪看日落/ 2021年09月07日 06:00/ 0 赞/ 474 阅读

相关原生 js 实现移动端 Touch 滑动反弹

移动端 Touch 滑动反弹 > 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：

秒速五厘米/ 2021年07月04日 20:37/ 0 赞/ 411 阅读