移动端的网页特效

    移动端触屏事件概述

    touchstart 手指触摸到一个DOM元素时触发

    touchmove 手指在一个DOM上滑动时触发

    touchend 手指从一个DOM上移开时触发

    触摸事件对象

    touchstart事件对象

    touches 正在触摸屏幕的所有手指的列表

    targetTouches 正在触摸当前DOM元素的手指列表

    changedTouches 手指状态发生改变的列表 从无到有 或者 从有到无

    当我们手指离开的时候就没有了touches和targetTouches

    e.targetTouches[0] 获取当前触摸屏幕的第一个手指

    直接window.scroll(0, 0)就可以了,里面的数值不需要加单位

    或者可以叫上一个滑动的效果

    手指移动中，计算出手指移动的距离.然后利用盒子原来的位置+手指移动的距离

    手指移动的距离：手指滑动的位置 - 手指刚开始触摸的位置

    .box {  
        width: 100px;  
        height: 100px;  
        background-color: pink;  
        position: absolute;  
        left:;  
    }

var box = document.querySelector('.box')
var startX = 0; //获取手指的位置
var startY = 0;
var x = 0; //获取盒子原来的位置
var y = 0;

    box.addEventListener('touchstart', function (e) {  
        // 获取手指初始的位置  
        startX = e.targetTouches\[0\].pageX  
        startY = e.targetTouches\[0\].pageY  
        x = this.offsetLeft;  
        y = this.offsetTop;  
    })

    box.addEventListener('touchmove', function (e) {  
        // 计算出手指的移动距离  手指移动后的坐标-手指的初始坐标  
        var moveX = e.targetTouches\[0\].pageX - startX;  
        var moveY = e.targetTouches\[0\].pageY - startY;  
        // 移动盒子  盒子原来的位置+手指移动的距离  
        this.style.left = x + moveX + 'px'  
        this.style.top = y + moveY + 'px'  
        e.preventDefault();   //阻止屏幕滚动的默认行为  
    })