js實現手機網頁滑動

GM的春天發表於2015-08-25
JS網頁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>Document</title>
    <style>
        *{ margin:0px; padding:0px; }
        body,html{ width:100%; height:100%; }
        div#rect{ width:100%; height:100%;}

    </style>
</head>
<body>

    <div id="rect">
        <div id="dire"></div>
        <div id="start">ss</div>
        <div id="move">ddd</div>

    </div>

    <script>

    (function(){

        var LSwiperMaker = function(o){ 

            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;

            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);

        }

        LSwiperMaker.prototype.start = function(e){

             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
             //
             document.getElementById("start").innerHTML = "開始位置："+this.sPos.x +" "+ this.sPos.y ;

        }
        LSwiperMaker.prototype.move = function(e){  

            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
            //
            document.getElementById("move").innerHTML = "現在的位置"+this.mPos.x +" "+ this.mPos.y ;

        }

        LSwiperMaker.prototype.end = function(e){

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

            this.control = false;
            this.config.backfn(this);

        }

        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove衝突

    }())

    var a = new LSwiperMaker({
            bind:document.getElementById("rect"),  // 繫結的DOM物件
            dire_h:true,     //true 判斷左右， false 判斷上下
            backfn:function(o){    //回撥事件
            /*
            */
            }
    })

    </script>
</body>
</html>

相關文章