webs
/
solide3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<style type="text/css">
	*{margin: 0; padding: 0;}
ul,li{list-style: none; list-style-type: none;}
.warp{ margin: 20px 20px; height: 40px; position: relative; overflow: hidden;}
.nav{position: absolute;font-size: 0; }
.nav li{ height: 40px; line-height: 40px; text-align: center; padding: 0 20px; float: left; font-size: 20px;}
</style>
</head>
<body>
<div class="warp">
<ul class="nav" id="nav">
	<li>菜单first</li>
	<li>菜单2</li>
	<li>菜单3</li>
	<li>菜单4</li>
	<li>菜单5</li>
	<li>菜单6</li>
	<li>菜单7</li>
	<li>菜单8</li>
	<li>菜单9</li>
	<li>菜单10</li>
	<li>菜单11</li>
	<li>菜单12</li>
	<li>菜单13</li>
	<li>菜单14</li>
	<li>菜单15</li>
	<li>菜单16</li>
	<li>菜单17</li>
	<li>菜单18</li>
	<li>菜单19</li>
	<li>菜单last</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
var nav = document.getElementById("nav");
var navs = document.getElementsByTagName("li");
var left = nav.style.left;      // ul 距离左边的距离
var totalWidth = 0;             // 总宽度
var minusValue = 0;             // 设备宽度与总宽度的差值
left = left ? left : 0;         // 初始时 ul 距离左边 0px
console.log(left);
// 获取所有 li 所占用的宽度
for (let i = 0; i < navs.length; i++) totalWidth += navs[i].offsetWidth;
// 固定 ul 的宽度
nav.style.width = totalWidth+10 + 'px';
minusValue = window.screen.width - totalWidth;
console.log('minusValue='+minusValue);

var startx,starty,movex,movey,endx,endy,nx,ny,off_w;
function touchtab(event) {
	event.preventDefault();
	if(event.type=="touchstart"){
         console.log('开始');
        var touch = event.touches[0];
        startx = Math.floor(touch.pageX);
        starty = Math.floor(touch.pageY);
   }else if(event.type=="touchmove"){//触摸中的坐标获取
         console.log('滑动中');
        var touch = event.touches[0];
        movex = Math.floor(touch.pageX);
        movey = Math.floor(touch.pageY);
        console.log(movex-startx)
        off_w = (movex-startx)
        nav.style.left = (left+off_w) + 'px';
   }else if(event.type == "touchend" || event.type == "touchcancel"){
            //获取最后的坐标位置
        endx = Math.floor(event.changedTouches[0].pageX);
        endy = Math.floor(event.changedTouches[0].pageY);
         console.log('结束');
         //获取开始位置和离开位置的距离
        nx = endx-startx;
        ny = endy-starty;

        left += nx
        console.log('end'+left)
        if(left>0){
        	left = 0
        }else if(left<window.screen.width-totalWidth){
        	left = window.screen.width-totalWidth
        }
        nav.style.left = left + 'px';
    }
}
nav.addEventListener('touchstart',touchtab,false);
nav.addEventListener('touchmove',touchtab,false);
nav.addEventListener('touchend',touchtab,false);
</script>
</body>
</html>