mobile_輪播圖_transform 版本_transform 讀寫二合一

時間 2019-11-08

標籤 mobile transform 版本讀寫二合一欄目無線简体版

原文原文鏈接

輪播圖_transform 版本javascript

關鍵點：
2D 變換 transform 不會改變元素在文檔流中的位置
定位 position 會改變元素在文檔流中的位置

語句解析太快，使用 setTimeoout(); 等待渲染不能超過 20ms

touchstart 實現無縫滑屏：

建立兩組圖片，ulList.innerHTML = ulList.innerHTML;css

1. 觸屏時，若是是第一組的第一張圖片，則瞬間切換到第二組的第一張圖片；html

2. 觸屏時，若是是第二組的最後一張圖片，則瞬間切換到第一組的最後一張。java

transform 讀寫二合一

關鍵點：node

arguments 參數列表，類數組對象，調用函數時系統隱式傳遞的一個實參數組

function transformEle(ele, attr, val){
    if(!ele.transform){
        ele.transform = {};
    };
    
    var result = "";
    if(arguments.length > 2){
        // 寫入操做
        ele.transform[attr] = val;
        
        for( var attrStr in ele.transform){
            switch(attrStr){
                case "translate":
                case "translateX":
                case "translateY":
                case "translateZ":{
                    result += attrStr+"("+ele.transform[attrStr]+"px) ";
                    break;
                };
                
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skew":
                case "skewX":
                case "skewY":{
                    result += attrStr+"("+ele.transform[attrStr]+"deg) ";
                    break;
                };
                
                case "scale":
                case "scaleX":
                case "scaleY":{
                    result += attrStr+"("+ele.transform[attrStr]+") ";
                    break;
                };
            };
        };
        
        ele.style.transform = result;
    }else{
        // 讀取操做
        if(ele.transform[attr]){
            result = ele.transform[attr];
        }else{
            if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
                result = 1;
            }else{
                result = 0;
            };
        }
    };
    
    return result;
};

移動端無縫滑屏

自動輪播與無縫滑屏的衝突

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
        <title>無縫輪播</title>

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
            }
            
            ul,
            ol {
                list-style: none;
            }
            
            input {
                outline: none;
            }
            
            img {
                display: block;
            }
            
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            
            #wrap {
                width: 100%;
                height: 100%;
                
                background-color: #96b377;
            }
            
            /**** ****/
            #wrap {
                position: relative;
            }
            
            #ul_list  {
                overflow: hidden;
                width: 1000%;
            }
            
            #wrap #ul_list>li {
                float: left;
            }
            
            #wrap #ul_list>li>a>img{
                width: 100%;
            }
            
            /**** 小圓點  ****/
            #ol_list {
                position: absolute;
                bottom: 10px;
                right: 10px;
                width: 75px;
                display: flex;
                justify-content: space-between;
            }
            
            #ol_list li {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: gray;
            }
            
            #ol_list li.active {
                background-color: deeppink;
            }
        </style>
    </head>
    
    <body>
        
        <!-- 模擬手機屏幕 -->
        <section id="wrap">
            <ul id="ul_list">
                <li>
                    <a href="javascript:;"><img src="./img/Deadpool.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Groot.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Hock.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/SpiderMan.jpg"/></a>
                </li>
            </ul>
            
            <ol id="ol_list">
                <li data-pindex="0" class="active"></li>
                <li data-pindex="1"></li>
                <li data-pindex="2"></li>
                <li data-pindex="3"></li>
                <li data-pindex="4"></li>
            </ol>
        </section>
        
        
        
        
        <!-- javascript 代碼 -->
        <script type="text/javascript">
            // 取消默認行爲
            document.addEventListener("touchstart", function(e){
                e.preventDefault();
            }, false);
            
            // 點透處理
            
            var clientWidth = document.documentElement.clientWidth;
            // 適配
            (function(){
                
                /* 1. 建立 style 標籤 */
                var styleNode = document.createElement("style");

                /* 2. 給 style 標籤添加內容 (屏幕分份, 大多數公司 16 份) */
                styleNode.innerHTML = "html {"+
                                           "font-size:"+clientWidth/16+"px !important"+
                                      "}";    /* IPhone 6 的 font-size: 23.4375px */

                /* 3. 把 style 標籤追加到 head 標籤裏 */
                document.head.appendChild(styleNode);
            }());
            
            var wrap = document.getElementById("wrap");
            var ulList = document.getElementById("ul_list");
            var olList = document.getElementById("ol_list");
            
            // 克隆第二組圖片
            ulList.innerHTML += ulList.innerHTML;
            var lis = document.querySelectorAll("#ul_list>li");
            var points = document.querySelectorAll("#ol_list>li");
            
            window.onload = function(){
                var styleNode = document.createElement("style");
                styleNode.innerHTML = "#ul_list {width:"+lis.length+"00%;}";
                styleNode.innerHTML += "#ul_list>li {width:"+100/lis.length+"%;}";
                document.head.appendChild(styleNode);
                
                styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}";
            };
            
            // 動態添加屬性
            ulList.oldUlX = 0;
            ulList.oldTouchX = 0;
            ulList.curIndex = 0;
            wrap.addEventListener("touchstart", function(e){
                window.clearInterval(ulList.autoTimer);
                var touch = e.changedTouches;
                
                // 無縫輪播
                if(ulList.curIndex == 0){
                    ulList.curIndex = lis.length/2;
                }else if(ulList.curIndex == lis.length-1){
                    ulList.curIndex = lis.length/2-1;
                }
                transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                
                ulList.oldTouchX = touch[0].clientX;
                ulList.oldUlX = transformEle(ulList, "translateX");
                ulList.style.transition = "0s all ease 0s";
            },false);
            
            wrap.addEventListener("touchmove", function(e){
                var touch = e.changedTouches;
                
                var newTouchX = touch[0].clientX;
                transformEle(ulList, "translateX", ulList.oldUlX+(newTouchX - ulList.oldTouchX) );
            },false);
            
            wrap.addEventListener("touchend", function(){
                ulList.curIndex = Math.round(-transformEle(ulList, "translateX")/clientWidth);
                ulList.style.transition = "1s all ease 0s";
                
                transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                
                for(var i=0; i<points.length; i++){
                    points[i].className = "";
                };
                points[ulList.curIndex%5].className = "active";
                ulList.autoRun();
            },false);
            
            olList.addEventListener("touchstart", function(e){
                window.clearInterval(ulList.autoTimer);
                touch = e.changedTouches;
                e.stopPropagation();
                ele = touch[0].target;
                if(ele.nodeName == "LI"){
                    for(var i=0; i<points.length; i++){
                        points[i].className = "";
                    };
                    ele.className = "active";
                    
                    ulList.curIndex = +ele.dataset.pindex;
                    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    ulList.autoRun();
                };
            }, false);
            
            // 自動輪播
            ulList.autoRun = function(){
                window.clearInterval(ulList.autoTimer);
                ulList.autoTimer = window.setInterval(function(){
                    // 無縫輪播
                    if(ulList.curIndex == lis.length-1){
                        ulList.curIndex = lis.length/2-1;
                        ulList.style.transition = "0s none";
                        transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    }
                    
                    ulList.curIndex++;
                    window.setTimeout(function(){
                        ulList.style.transition = "1s all ease 0s";
                        transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
                    }, 50);
                    
                    for(var i=0; i<points.length; i++){
                        points[i].className = "";
                    };
                    points[ulList.curIndex%5].className = "active";
                }, 2500-50);
            };
            
            ulList.autoRun();
            
            // 讀寫 transform 二合一
            function transformEle(ele, attr, val){
                if(!ele.transform){
                    ele.transform = {};
                };
                
                var result = "";
                if(arguments.length > 2){
                    // 寫入操做
                    ele.transform[attr] = val;
                    
                    for( var attrStr in ele.transform){
                        switch(attrStr){
                            case "translate":
                            case "translateX":
                            case "translateY":
                            case "translateZ":{
                                result += attrStr+"("+ele.transform[attrStr]+"px) ";
                                break;
                            };
                            
                            case "rotate":
                            case "rotateX":
                            case "rotateY":
                            case "rotateZ":
                            case "skew":
                            case "skewX":
                            case "skewY":{
                                result += attrStr+"("+ele.transform[attrStr]+"deg) ";
                                break;
                            };
                            
                            case "scale":
                            case "scaleX":
                            case "scaleY":{
                                result += attrStr+"("+ele.transform[attrStr]+") ";
                                break;
                            };
                        };
                    };
                    
                    ele.style.transform = result;
                }else{
                    // 讀取操做
                    if(ele.transform[attr]){
                        result = ele.transform[attr];
                    }else{
                        if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
                            result = 1;
                        }else{
                            result = 0;
                        };
                    }
                };
                
                return result;
            };
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。