js原生選項卡（包含移動端無縫選項卡）三

標籤：hang   target   var   transform   tar   html   控制   單位   als   

今天分享下移動端原生js的無縫輪播圖；

移動端盡量減少使用DOM操作來頻繁的浪費移動端裝置的效能，所以這個無縫輪播圖更多的使用了transition和transform，無縫的思想和昨天分享的PC端的無縫輪播的思想是一樣的，分別在正常的圖片的前面插入了最後一張圖片和在正常圖片的最後插入了第一張圖片，在運動到這兩張圖片時候瞬間清除transition並把整個圖片鏈拉回到正常圖片流的位置，從而從產生了無縫

這個移動端輪播圖中還闡述了一個思路：為了更好的考慮使用者的體驗，當使用者滑動螢幕的距離小於一定的值得時候我們圖片並不會更換到下一張，這個效果的產生得益於流程式控制制if判斷使用者按下手指和抬起手指的座標差的值

相同的今天的例子中也使用了開關的概念，具體思路昨天的文章中已經闡述

今天的例子以640的解析度為基準，並在js動態改變onresize時候值，使我們的代碼滿足不同手機的尺寸

The best preparation for tomorrow is doing your best today.
過好今天，是對明天最好的準備

html代碼：

    <div id="tabs">        <ul>            <li style="background:pink;">3</li>            <li style="background:red;">0</li>            <li style="background:green;">1</li>            <li style="background:yellow;">2</li>            <li style="background:pink;">3</li>            <li style="background:red;">0</li>        </ul>    </div>

css代碼：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta name="format-detection" content="telephone=no,email=no">    <style>        *{            padding: 0;            margin: 0;            list-style:none;        }        html{            font-size:20px;        }        #tabs ul{            width: 96rem;            height: 100%;            overflow:hidden;            transform:translateX(-16rem);        }        #tabs ul li{            width: 16rem;            height: 7.5rem;            float:left;            font-size:3rem;            color:#fff;            text-align:center;            line-height:7.5rem;        }

js代碼：

        //以640的解析度為基準解析度設定的css模型尺寸，閉包中的代碼為即時改變單位尺寸        (function(window,document){            function change(){                 var oHTML=document.getElementsByTagName(‘html‘)[0];                oHTML.style.fontSize=20*document.documentElement.clientWidth/320+‘px‘;            }            change();            window.addEventListener(‘resize‘,change,false);        })(window,document);            document.addEventListener(‘DOMContentLoaded‘,function(){                var oTab=document.getElementById(‘tabs‘);                var oUl=oTab.getElementsByTagName(‘ul‘)[0];                var aLi=oUl.children;                var iNow=1;                var x=-aLi[0].offsetWidth*iNow;                //設定開關                var bReady=false;                oUl.addEventListener(‘touchstart‘,function(ev){                    if(bReady){return;}                    bReady=true;                    oUl.style.transition=‘none‘;                    //當開始觸摸的時候記錄按下的座標                    var downX=ev.targetTouches[0].pageX;                    var disX=downX-x;                    function fnMove(ev){                        //在move的時候重新計算位移，並給ul賦值                        x=ev.targetTouches[0].pageX-disX;                        oUl.style.transform=‘translateX(‘+x+‘px)‘;                    }                    function fnEnd(ev){                        document.removeEventListener(‘touchmove‘,fnMove,false);                        document.removeEventListener(‘touchend‘,fnEnd,false);                        //在抬起的時候記錄抬起的位置，注意抬起的位置是changedTouches[0]                        var upX=ev.changedTouches[0].pageX;                        //開啟transition                        oUl.style.transition=‘0.4s all ease‘;                        //這裡為了使用者體驗，判斷了一個最小移動距離，當移動距離小於這個值得時候並不發生運動                        if((Math.abs(upX-downX))>50){                            //判斷移動方向，是向右還是向左                            if(downX>upX){                                iNow++;                                //設定移動範圍                                if(iNow==aLi.length) iNow=aLi.length-1;                            }else{                                //和右面是相反的                                iNow--;                                if(iNow==-1) iNow=0;                            }                        }                        //進行賦值                        x=-aLi[0].offsetWidth*iNow;                        oUl.style.transform=‘translateX(‘+x+‘px)‘;                        //設定ul的變化                        function tEnd(){                            //為了不讓瞬間拉回被發現，首先要清除transition                            oUl.style.transition=‘none‘;                            //進行無縫判斷，當圖片到右面倒數第二張的時候拉回到第二張                            if(iNow==aLi.length-1){                                iNow=1;                            }else if(iNow==0){                                //當圖片運動到第一張的時候瞬間拉回到倒數第三張                                iNow=aLi.length-2;                            }                            x=-aLi[0].offsetWidth*iNow;                            oUl.style.transform=‘translateX(‘+x+‘px)‘;                            bReady=false;                        }                        oUl.addEventListener(‘transitionend‘,tEnd,false);                    }                    document.addEventListener(‘touchmove‘,fnMove,false);                    document.addEventListener(‘touchend‘,fnEnd,false);                    ev.preventDefault();                },false);            },false);    </script>

　　

js原生選項卡（包含移動端無縫選項卡）三