首页手记手机滑动自定义事件初探一

手机滑动自定义事件初探一

标签：

JavaScript WebApp

手机滑动自定义事件初探

写在前边：

自定义事件实现的手机滑动，
前端小白，js水平有限，请多多指教

注意：

请按F12键手机模拟器查看

上代码：

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
   <meta charset="UTF-8" />
   <title>testing</title>
   <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
   <style>
   *{padding:0;margin:0;}
   html,body{width:100%;height:100%}
   body{overflow:hidden;}
   .ele{
   width:200px;
   height:300px;
   background-color:#ccc;
   border:1px solid #f00;
   position:absolute;
   top:80px;left:0;
   }

   </style>
</head>
<body>
<p id="test">测试专用勿删</p>
<div id="ele" class="ele"></div>
<script type="text/javascript">
// 手势滑动事件
(function () {
    var pos={x:0,y:0}; // 记录手势位置
    // 手势滑动
    function swiper(obj,callback) {
        // obj=obj || document;
        // 手势按下
        obj.addEventListener("touchstart",function (ev) {
            var ev=ev?ev:window.event;
            pos={x:ev.touches[0].clientX,y:ev.touches[0].clientY};
        },false);
        // 手势移动
        obj.addEventListener("touchmove",function (ev) {
            var ev=ev?ev:window.event;
            var curPos={x:ev.touches[0].clientX,y:ev.touches[0].clientY};
            var dis=Math.sqrt((curPos.x-pos.x)*(curPos.x-pos.x)+(curPos.y-pos.y)*(curPos.y-pos.y)); // 记录两点之间的距离
            var vLine=Math.sin(Math.PI/4)*dis; // sin45°
            if (Math.abs(curPos.y-pos.y)<=Math.abs(vLine)) {
                if (curPos.x-pos.x>0) {
                    console.log("右滑");
                    callback.moveRight && callback.moveRight.forEach(function (item,index) {
                        item();
                    });

                } else {
                    console.log("左滑");
                    callback.moveLeft && callback.moveLeft.forEach(function (item,index) {
                        item();
                    });
                }
            } else if (Math.abs(curPos.x-pos.x)<=Math.abs(vLine)) {
                if (curPos.y-pos.y>0) {
                    console.log("下滑");
                    callback.moveBottom && callback.moveBottom.forEach(function (item,index) {
                        item();
                    });
                }
                else {
                    console.log("上滑");
                    callback.moveTop && callback.moveTop.forEach(function (item,index) {
                        item();
                    });
                }
            } 
        },false);
    }

    // 触发滑动事件
    HTMLElement.prototype.swiperon=function (eventType,func) {
        var _this=this;
        if (!_this[eventType]) {
            _this[eventType]=[];
        }
        _this[eventType].push(func);
        switch(eventType) {
            case "swiperLeft":
                swiper(_this,{"moveLeft": _this[eventType]});
                break;
            case "swiperRight":
                swiper(_this,{"moveRight":_this[eventType]});
                break;
            case "swiperTop":
                swiper(_this,{"moveTop":_this[eventType]});
                break;
            case "swiperBottom":
                swiper(_this,{"moveBottom":_this[eventType]});
                break;
            default:alert("SWITCH ERROR!");
                break;
        }
    };
    // 移除滑动事件
    HTMLElement.prototype.swiperoff=function (eventType,func) {
        var _this=this;
        _this[eventType] && _this[eventType].forEach(function (item,index) {
            if (item===func) {
                _this[eventType].splice(index,1);
            }
        });
    };

}());

// 主
function init() {
    var ele=document.getElementById("ele");

    // 测试
    function f1() {
        document.title="我有话";
    }

    // 右滑事件
    document.body.swiperon("swiperRight",function () {
        if (!$("#ele").is(":animated")) {
            $("#ele").animate({"left":"0"},300);
        }
    });

    // 左滑事件
    ele.swiperon("swiperLeft",function () {
        if (!$("#ele").is(":animated")) {
            $("#ele").animate({"left":"-"+$(this).width()+"px"},300);
        }
    });

    ele.swiperon("swiperRight",f1);
    //ele.swiperoff("swiperRight",f1);
}
window.addEventListener("load",init,false);
</script>
</body>
</html>

点击查看更多内容