JavaScript之移动端网页特效

最新推荐文章于 2025-07-28 22:31:20 发布

shirlyran

最新推荐文章于 2025-07-28 22:31:20 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/shirlyran/article/details/107578686

本文深入探讨了移动端开发中的关键技术和实践，包括触屏事件处理、click事件延时解决方案、使用Swiper插件创建轮播图、移动端视频播放插件介绍、以及如何利用本地存储提升用户体验。文章还提供了丰富的代码示例和资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 触屏事件

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

1.1 触摸事件对象 TouchEvent

三个常见的触摸事件对象
触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有, 从有到无变化

2. 网页特效案例

移动端轮播图，返回顶部

2.1 classList属性

返回元素类名

2.1.1 添加类

element.classlist.add('类名')

2.1.2 移除类

element.classlist.remove('类名')

2.1.3 切换类

element.classlist.toggle('类名')//原先有这个类名，就去除；没有就加上

2.2 click延时解决方案

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

解决方案：

1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是:
1.当我们手指触摸屏幕,记录当前触摸时间
2.当我们手指离开屏幕,用离开的时间减去触摸的时间
3.如果时间小于150ms ,并且没有滑动过屏幕，那么我们就定义为点击
//封装tap.解决click 300ms延时
function tap (obj， callback) {
    var isMover= false; 
    var startTime= 0; //记录触摸时候的时间变量
    obj . addEventLi stener (' touchstart', function (e) {
        startime = Date.now(); //记录触摸时间
    };
    obj . addEventLi stener (' touchmove', function (e) {
        isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
    });
    obj . addEventLi stener (' touchend', function (e){
        if (!isMove 66 (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击
            callback && callback(); //执行回调函数
        }
        isMove = false; // 取反重置
        startTime = 0
    });
}
//调用
tap(div, function(){ // 执行代码});
3.使用插件。fastclick 插件解决300ms延迟。解决页面中所有click的延时问题

网址：https://github.com/ftlabs/fastclick

使用：
<head>
    <script src="fastclick.js"></script>
</head>
<body>
    <script>
        if ('addEventListener' in document) {
	        document.addEventListener('DOMContentLoaded', function() {
		        FastClick.attach(document.body);
	        }, false);
        }
    </script>
</body>

3. 移动端常用开发插件

3.1 swiper 插件

网址：https://www.swiper.com.cn/

快速制作页面切换、轮播图效果。

使用：

官方使用说明：https://www.swiper.com.cn/usage/index.html

下载swiper压缩包
引入相关css、js文件（解压后在dist文件夹里）

复制下面的代码，放到需要的位置

<!-- Swiper 最好不要修改类名和结构-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
        //Slide1,2,3....可换成需要的图片、内容
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

将html的style里的相关的样式（如下）放进css文件li

    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

将下面的代码放进相应页面的js文件里

<script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
 </script>

3.2 其他移动端常见插件

superslide：http://superslide2.com/ 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等

iscroll： https://github.com/cubiq/iscroll

3.3 移动端视频插件

zy.media.js

4.移动端常用框架

4.1 bootstrap

bootstrap中文网：https://www.bootcss.com/

框架里有很多js插件。

所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。

5. 本地存储

特性：

数据存储在用户浏览器中
设置、读取方便、甚至页面剧新不失数据
容量较大, sessionStorage约5M、 localStorage约20M
只能存储字符串,可以将对象JSON.stringify()编码后存储
获取本地存储的数据时，使用JSON.parse() 将字符串转换为对象格式

5.1 window.sessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用

存储数据：
sessionStorage.setltem(key, value)
获取数据：
sessionStorage. getltem(key)
删除数据：
sessionStorage.removeltem(key)
清空所有的数据（慎用）：
sessionStorage.clear()

5.2 window.localStorage

特性：

生命周期永久生效,除非手动删除否则关闭页面也会存在
可以多窗口(页面)共享(同一浏览器可以共享)
以键值对的形式存储使用

存储数据：
localStorage.setltem(key, value)
获取数据：
localStorage. getltem(key)
删除数据：
localStorage.removeltem(key)
清空所有的数据（慎用）：
localStorage.clear()

5.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>Document</title>
</head>

<body>
    <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>