JavaScript之移动端网页特效

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

  1. 下载swiper压缩包
  2. 引入相关css、js文件(解压后在dist文件夹里)
  3. 复制下面的代码,放到需要的位置
    <!-- 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>

     

  4. 将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;
        }

     

  5. 将下面的代码放进相应页面的js文件里
    <script>
        var swiper = new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
          },
        });
     </script>

     

3.2 其他移动端常见插件

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

特性:

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

存储数据:

sessionStorage.setltem(key, value)

获取数据:

sessionStorage. getltem(key)

删除数据:

sessionStorage.removeltem(key)

清空所有的数据(慎用):

sessionStorage.clear()

 

5.2 window.localStorage

特性:

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

存储数据:

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>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值