JS 移动端笔记

移动端的网页特效

    移动端触屏事件概述

触屏touch事件

    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:;
        }

<div class="box"></div>

 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();   //阻止屏幕滚动的默认行为
        })