touch事件

最新推荐文章于 2023-11-11 11:16:29 发布

vcxiaohan2

最新推荐文章于 2023-11-11 11:16:29 发布

阅读量279

点赞数

分类专栏：手机端

本文链接：https://blog.csdn.net/u011500781/article/details/51735728

版权

手机端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

包含以下知识点：

1.touch事件操作

2.运动框架

3.兼容获取style属性

4.手机端html标准格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="images/send.png" type="/image/x-icon">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
    <title>test</title>

    <style>
        * {
            margin: 0; 
            padding: 0;
            font-size: 0.04rem;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        body {
            height: 3rem;
        }
        .head {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: .2rem;
            background: red;
        }
        
    </style>
</head>
<body>
    <div class="head">
        
    </div>


    <script>
    window.onload = function() {
        var winW = document.body.clientWidth,
            htmlObj = document.querySelector('html');

        htmlObj.style.fontSize = ((winW<750) ? winW : 750) +'px';

        var head = document.querySelector('.head');

        var startX = 0,
            startY = 0,
            offsetX = 0,
            offsetY = 0,
            oldX = 0,
            oldY = 0,
            dir = '';//上 右 下 左

        head.addEventListener('touchstart', function(e) {
            var targetTouches = e.targetTouches[0];
            oldX = startX = targetTouches.pageX;
            oldY = startY = targetTouches.pageY;

            offsetX = targetTouches.pageX - this.offsetLeft;
            offsetY = targetTouches.pageY - this.offsetTop;
        });
        head.addEventListener('touchmove', function(e) {
            e.preventDefault();//阻止页面滚动
            
            var targetTouches = e.targetTouches[0];

            var newX = targetTouches.pageX,
                newY = targetTouches.pageY,
                diffX = newX - oldX,
                diffY = newY - oldY;

            var angle = Math.atan((newX - oldX)/(newY - oldY)) * 180 / Math.PI;

            if(angle > -45 && angle < 45 && newY < oldY){//上
                dir = 'up';
            }
            if(angle > -45 && angle < 45 && newY > oldY){//下
                dir = 'down';
            }
            if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && newX < oldX){//左
                dir = 'left';
            }
            if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && newX > oldX){//右
                dir = 'right';
            }

            switch(dir) {
                case 'down':
                    this.style.top = (targetTouches.pageY - offsetY)/3 +'px';
                    break;
            }

            oldX = newX;
            oldY = newY;

            
        });
        head.addEventListener('touchend', function(e) {
            var targetTouches = e.targetTouches[0];

            startMove(head, {'top': '0',});
        });

        


        //阻止页面滚动
        /*document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        });*/
        
        //打印对象属性
        function writeObj(obj) {
            var description = "";
            for (var i in obj) {
                var property = obj[i];
                description += i + " = " + property + "\n";
            }
            return description;
        }

        //touch框架(待完善)
        function touchFunc(obj,type,func) {
            //滑动范围在5x5内则做点击处理，s是开始，e是结束
            var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
            var sTime = 0, eTime = 0;
            type = type.toLowerCase();
          
            obj.addEventListener("touchstart",function(){
                sTime = new Date().getTime();
                init.sx = event.targetTouches[0].pageX;
                init.sy = event.targetTouches[0].pageY;
                init.ex = init.sx;
                init.ey = init.sy;
                if(type.indexOf("start") != -1) func();
            }, false);
          
            obj.addEventListener("touchmove",function() {
                event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
                init.ex = event.targetTouches[0].pageX;
                init.ey = event.targetTouches[0].pageY;
                if(type.indexOf("move")!=-1) func();
            }, false);
          
            obj.addEventListener("touchend",function() {
                var changeX = init.sx - init.ex;
                var changeY = init.sy - init.ey;
                if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
                    //左右事件
                    if(changeX > 0) {
                        if(type.indexOf("left")!=-1) func();
                    }else{
                        if(type.indexOf("right")!=-1) func();
                    }
                }
                else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
                    //上下事件
                    if(changeY > 0) {
                        if(type.indexOf("top")!=-1) func();
                    }else{
                        if(type.indexOf("down")!=-1) func();
                    }
                }
                else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
                    eTime = new Date().getTime();
                    //点击事件，此处根据时间差细分下
                    if((eTime - sTime) > 300) {
                        if(type.indexOf("long")!=-1) func(); //长按
                    }
                    else {
                        if(type.indexOf("click")!=-1) func(); //当点击处理
                    }
                }
                if(type.indexOf("end")!=-1) func();
            }, false);
        };

        //运动框架
        function startMove(obj, json, fnEnd) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {

                var bStop = true;
                for (var attr in json) {
                

                    var cur = 0;

                    if (attr == 'opacity') {
                        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        cur = parseInt(getStyle(obj, attr));
                    }

                    var speed = (json[attr] - cur) / 6;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (cur != json[attr]) bStop = false;

                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                        obj.style.opacity = (cur + speed) / 100;

                    } else {
                        obj.style[attr] = cur + speed + 'px';
                    }

                }

                if (bStop)
                {
                    clearInterval(obj.timer);

                    if (fnEnd) fnEnd();
                }

            },
            30);
        }

        //兼容ie获取style属性
        function getStyle(obj, name) {
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }














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