移动端常见特效

移动端介绍

//1 不用考虑兼容性问题 可以放心的使用原生JS
//2 能用CSS3的就用c3
//3 会有独特的地方 如触屏事件

一触屏事件

1）常见事件

//1 touchstart 手指触摸事件

//2 touchmove  手指滑动事件

//3 touchend   手指移出事件

2）代码范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch事件</title>
    <style>
        div {
             100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div = document.querySelector('div');
    // 1. 手指触摸DOM元素事件
    div.addEventListener("touchstart", function () {
        console.log('手指触摸事件');
    });
    //2. 手指滑动触发
    div.addEventListener('touchmove',function () {
        console.log('手指滑动事件');
    });
    // //3 手指离开触发
    div.addEventListener('touchend',function () {
        console.log('我离开了');
    });
</script>
</body>
</html>

二触摸对象 TouchEvent

1）常见属性

//1 touchs 正在触摸屏幕的所有手指的列表

//2 targetTouches 正在触摸当前DOM元素的手指列表 [ 最常用 ]

//3 changeTouches 手指侦听发生了改变的列表 (从无到右、从有到无)

2）三者的区别

//1 手指离开事件 只有 changeTouches 可以获取到

//2 如果侦听的是一个DOM元素 touchs 和 targetTouches 一样

3）获取到某个手指的信息

//1 e.targetTouches[0] 得到正在触摸DOM元素的 第一个手指的相关信息
//比如手指的坐标

三移动端拖动元素

1）基础知识

//1 touchstart  touchmove  touchend 可以实现拖动元素

//2 获取当前手指的坐标值 targetTouches[0].pageX

//e.preventDefault();//阻止屏幕默认的滚动行为

2）拖动元素三部曲

//1 触摸元素 touchstart 获取手指初始坐标 同时获得盒子原来的位置

//2 移动手指 touchmove 计算手指的滑动距离 并且移动盒子

//3 离开手指 touchend 

手指移动也会触发滚动屏幕 所以要阻止默认的屏幕滚动 e.preventDefaule();

3）代码范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端拖动元素</title>
    <style>
        div {
            position: absolute;
            left: 0;
             100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
<div></div>
<script>
    // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
    // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
    // （3） 离开手指 touchend:

    var div = document.querySelector('div');
    var startX = 0;//声明手指的初始做标
    var startY = 0;
    var x = 0;//声明盒子原来的位置
    var y = 0;

    //1 触摸手指
    div.addEventListener('touchstart',function (e) {
        //拿到第一个手指坐标值
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        //拿到盒子的初始位置
        x = this.offsetLeft;
        y = this.offsetTop;
    });
    //2 移动手指
    div.addEventListener('touchmove',function(e){
        //计算手指的移动距离 = 手指移动之后的坐标 - 移动之前的坐标
        var moveX = e.targetTouches[0].pageX - startX;//e.targetTouches[0].pageX 得到移动手指移动后的x坐标
        var moveY = e.targetTouches[0].pageY - startY;

        //移动盒子 = 盒子原来的位置 + 手指移动的距离
        this.style.left = x + moveX + 'px';
        this.style.top  = x + moveY + 'px';
        e.preventDefault();//阻止屏幕默认的滚动行为
    });
</script>
</body>
</html>