移动端适配总结（补充一个移动端touch案例） - 执候

公告

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{width:100%; overflow:hidden;}
#picList{width:40rem;overflow:hidden;}
#picList img{width:10rem;float:left;}
#picBtns{height:0.3rem;padding:0.2rem 0;margin:0; text-align:center;}
#picBtns span{width: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{width:100%;overflow:hidden;}
#picList{width:40rem;overflow:hidden;}
#picList a{float:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
#picList img{width:10rem;}
#btns{margin:0;padding:0.15rem;height:0.2rem; text-align:center;}
#btns span{ display:inline-block;width: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{
    width:100%;
    height:30px;
    line-height: 30px;
    border:1px solid #ccc;
    margin:20px auto;
    background:#fff;
    overflow:hidden;
}
.navUl{
    width:auto;
    display: block;
    height:30px;

}
.navUl li{
    float:left;
    width: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/

posted on 2018-02-06 11:47 执候阅读(108) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部