JS-PC/MOBILE技巧--MOBILE

最新推荐文章于 2024-07-12 16:27:40 发布

kuiini

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量784

点赞数 7

分类专栏： JavaScript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/kuiini/article/details/137711597

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

二、移动端网页特效

1、触屏事件

触摸事件概述

常见的触屏事件：

触屏touch事件说明
touchstart 手指触摸到一个 DOM 元素是触发
touchmove 手指在一个 DOM 元素上滑动时触发
touchend 手指从一个 DOM 元素上移开时触发

触屏touch事件	说明
touchstart	手指触摸到一个 DOM 元素是触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div></div>
   <script>
       var div = document.querySelector('div');
       div.addEventListener('touchstart', function() {
           console.log('I touched you.');
       })
       div.addEventListener('touchmove', function() {
           console.log('I touch you again.');
       })
       div.addEventListener('touchend', function() { 
           console.log('I don`t touch you.');
       })
   </script>
</body>
</html>

触摸事件对象（TouchEvent）

常见触摸事件对象：

触摸列表说明
touches 正在触摸屏幕的所有手指的一个列表
targetTouches 正在触摸当前 DOM 元素上的手指的一个列表
changedTouches 手指状态发生了改变的列表，从无到有、从有到无的改变

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前 DOM 元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有、从有到无的改变

移动端拖动元素

当前手指的坐标值：可以使用 targetTouches[0] 里面的 pageX 和 pageY
移动端拖动距离：盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置

注意：手指移动会触发滚动屏幕，所以要阻止默认的屏幕滚动 e.preventDefault();

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           position: absolute;
           left: 0;
           width: 100px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div></div>
   <script>
       var div = document.querySelector('div');
       // 手指初始坐标
       var startX = 0;
       var startY = 0;
       // 盒子原来的位置
       var x = 0;
       var y = 0; 
       div.addEventListener('touchstart', function(e) {
           startX = e.targetTouches[0].pageX;
           startY = e.targetTouches[0].pageY;
           x = this.offsetLeft;
           y = this.offsetTop;
       })
       div.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(); 
       })
   </script>
</body>
</html>

2、移动端常见特效

classList 属性

classList 属性是 HTML5 新增的一个属性，返回元素的类名，但是 ie10 以上版本才支持。

该属性用于在元素中添加、移除及切换 CSS 类：

添加：
element.classList.add('类名');

移除：
element.classList.remove('类名');

切换:
element.classList.toggle('类名');

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .bg {
           background-color: black;
       }
   </style>
</head>
<body>
   <div class="one two"></div>
   <button>开关灯</button>
   <script>
       var div = document.querySelector('div');
       // console.log(div.classList[1]);
       // 1.添加
       div.classList.add('three');
       // 2.移除
       div.classList.remove('one');
       // 3.切换
       var btn = document.querySelector('button');
       btn.addEventListener('click', function() {
           document.body.classList.toggle('bg');
       })
   </script>
</body>
</html>

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放 (double tap to zoom) 页面。

禁用缩放
<meta name="viewport" content="user-scalable=no">

利用 touch 事件自己封装这个事件

记录触摸事件
用结束触摸事件减去触摸时间
若该时间超过150ms，并且没有滑动屏幕，则认为点击

// 封装tap, 解决 click 300ms 延时
function tap(obj, callback) {
    var isMove = false;
    var startTime = 0; // 触摸时间
    obj.addEventListener('touchstart', function(e) {
        startTime = Date.now();
    });
    obj.addEventListener('touchmove', function(e) {
        isMove = true; // 是否有滑动
    })；
    obj.addEventListener('touchend', function(e) {
        if (!isMove && (Date.now() - startTime) < 150) {
            callback && callback();
        }
        isMove = false;
        startTime = 0;
    });
}
tap(div, function() {...})

3.使用插件：fastclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
    <script src="fastclick.js"></script>
</head>
<body>
    <div></div>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        var div = document.querySelector('div');
        div.addEventListener('click', function() {
            alert(1);
        })
    </script>
</body>
</html>

3、移动端常用开发插件

fastclick.js 的使用

Swiper 插件的使用

其他移动端常见插件

superslide
iscroll

移动端视频插件 zy.media.js

4、移动端常用开发框架

Bootstrap

kuiini

关注

7
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
JS-PC/MOBILE技巧--MOBILE

触屏touch事件说明touchstart手指触摸到一个 DOM 元素是触发touchmove手指在一个 DOM 元素上滑动时触发touchend手指从一个 DOM 元素上移开时触发
复制链接

扫一扫