移动端的网页特效

移动端触屏事件概述

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

        })

巴特西

JS 移动端笔记

移动端的网页特效

触屏touch事件

返回顶部

移动端拖动原理

最新文章

热门文章