devicePixelRatio（设备像素比）
定义如下：
window.devicePixelRatio=设备的物理像素/设备独立像素(dips)(device-independent pixel)
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no"> <meta charset="utf-8" /> <title>无标题文档</title> <script> document.getElementsByTagName("html")[0].style.fontSize=window.screen.width/10+"px"; </script> <style> body{background:#f3f2f3;margin:0; font-size:0.5rem;} #picWrap{100%; overflow:hidden;} #picList{40rem;overflow:hidden;} #picList img{10rem;float:left;} #picBtns{height:0.3rem;padding:0.2rem 0;margin:0; text-align:center;} #picBtns span{0.3rem;height:0.3rem;margin:0 0.1rem; border:1px solid #000; display:inline-block; box-sizing:border-box; border-radius:0.15rem; vertical-align:top;} #picBtns .active{background:#f60;} </style> </head> <body> <section id="picWrap"> <div id="picList"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> </div> </section> <p id="picBtns"> <span class="active"></span> <span></span> <span></span> <span></span> </p> <script> document.ontouchmove=function(e) { e.preventDefault(); }; window.onload=function(){ var oPicList=document.getElementById("picList"); var aBtns=document.getElementById("picBtns").children; var iScroll=0; var iStartX=0; var iStartPageX=0; var iNow=0; oPicList.ontouchstart=function(ev){ iStartPageX=ev.changedTouches[0].pageX; iStartX=iScroll; oPicList.style.WebkitTransition=oPicList.style.MozTransition=oPicList.style.transition="none"; } oPicList.ontouchmove=function(ev){ var iDis=ev.changedTouches[0].pageX-iStartPageX; iScroll=iStartX+iDis; setStyle(); } function setStyle() { oPicList.style.WebkitTransform=oPicList.style.MozTransform=oPicList.style.transform="translateX("+iScroll+"px)"; } oPicList.ontouchend=function(ev){ var iDis=ev.changedTouches[0].pageX-iStartPageX; var iNub=Math.round(iDis/window.screen.width); console.log("ev",ev,iDis,iNub); iNow-=iNub; if(iNow<0){ iNow=0; } console.log(iNow) if(iNow>aBtns.length-1){ iNow=aBtns.length-1; } iScroll=-iNow*window.screen.width; for(var i=0;i<aBtns.length;i++){ aBtns[i].className=""; } aBtns[iNow].className="active"; setStyle(); } } </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no"> <script> </script> <style> body{margin:0;background:#e1e1e1;} *{ padding:0; margin:0; } /*#picWrap{100%;overflow:hidden;} #picList{40rem;overflow:hidden;} #picList a{float:left;-webkit-tap-highlight-color:rgba(0,0,0,0);} #picList img{10rem;} #btns{margin:0;padding:0.15rem;height:0.2rem; text-align:center;} #btns span{ display:inline-block;0.2rem;height:0.2rem;margin:0 0.1rem; vertical-align:top;border:1px solid #000; box-sizing:border-box; border-radius:0.1rem;} #btns .active{ background:#f60;}*/ .clearfix:after{ content:''; display: block; clear: both; visibility: hidden; height:0; } ul,li{ list-style: none; } .nav{ 100%; height:30px; line-height: 30px; border:1px solid #ccc; margin:20px auto; background:#fff; overflow:hidden; } .navUl{ auto; display: block; height:30px; } .navUl li{ float:left; 94px; height:30px; text-align: center; color:#000; border-right:1px solid #ccc; box-sizing:border-box; } .navUl li a{ display:block; text-decoration: none; } </style> </head> <body> <div class="nav"> <ul class="navUl clearfix"> <li class="navLi"> <a href="javascript:;"> 首页1 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页2 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页3 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页4 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页5 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页6 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页7 </a> </li> <li class="navLi"> <a href="javascript:;"> 首页8 </a> </li> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> window.onload=function(){ var navUl=$(".navUl"); var navLi=$(".navLi"); navUl.width(navLi.outerWidth()*navLi.length+'px'); var iScroll=0; var iSartX=0; var iStartPageX=0; var iNow=0; navUl[0].ontouchstart=function(ev){ console.log("dsa",ev); iStartPageX=ev.changedTouches[0].pageX; iSartX=iScroll; navUl[0].style.WebkitTransition=navUl[0].style.MozTransition=navUl[0].style.transition="none"; } navUl[0].ontouchmove=function(ev){ var iDis=ev.targetTouches[0].pageX-iStartPageX; iScroll=iSartX+iDis; setStyle();
} function setStyle() { navUl[0].style.WebkitTransform=navUl[0].style.MozTransform=navUl[0].style.transform="translateX("+iScroll+"px)"; } navUl[0].ontouchend=function(ev){ var iDis=ev.changedTouches[0].pageX-iStartPageX; var iNub=Math.round(iDis/navLi.width()); iNow-=iNub; if(iNow<0){ iNow=0; } console.log("dsad",iNow,iNub,navLi.length); if(iNow>navLi.length-4){ iNow=navLi.length-4; } iScroll=-iNow*navLi.width(); setStyle(); } } </script> </body> </html>
参考：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/