移动页面特效

最新推荐文章于 2024-10-02 05:39:15 发布

DF-vegan

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量38

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_57920269/article/details/129400800

版权

一、事件touch

代码检测touch事件

    <script>
      // 获取元素
      var div = document.querySelector("div");
      //  1.  touchstart：触摸
      div.addEventListener("touchstart", function () {
        console.log("我触摸了你");
      });
      //  2. touchmove:移动
      div.addEventListener("touchmove", function () {
        console.log("摸着移动");
      });
      //  2.  touchend：触摸结束
      div.addEventListener("touchend", function () {
        console.log("我摸完了");
      });
    </script>

移动浏览器的兼容性较好，不需要考虑js兼容问题，可以放心使用原生js
但是移动端也有独特地方：触屏事件，android和ios都存在
动画效果实现：css3或者js

二、触屏事件对象：TouchEvent

主要运用以上三个事件对象属性

      div.addEventListener("touchstart", function (e) {
        console.log("我触摸了你");
        // touches :正在触摸屏幕的所有手指个数列表 //
        // targetTouches：正在触摸当前DOM元素的手指个数列表（最常使用）
        console.log(e.targetTouches[0]);
        // 如果侦听的是一个DOM元素，以上两个效果一样 //
        // changedTouches：手指状态发生改变的列表
      });

以下是事件对象的所有属性

三、按住拖动案例（类似于模态框移动）

获取触屏初始位置
获取手指移动距离
移动距离 = 手指移动距离 + 初始盒子距离

   <script>
      /* 
        获取触屏初始位置
        获取手指移动距离
        移动距离 = 手指移动距离 + 初始盒子距离 
      */
      //  设置手指初始坐标、盒子初始距离全局变量
      var starstX = 0;
      var starstY = 0;
      var x = 0;
      var y = 0;
      // 1. 触摸获取到鼠标的位置+触摸到的dom'元素距离window的距离（里面的只是调用全局变量）
      var div = document.querySelector("div");
      div.addEventListener("touchstart", function (e) {
        // 1.手指触摸到的初始距离
        starstX = e.targetTouches[0].pageX;
        starstY = e.targetTouches[0].pageY;
        // 2.盒子原来的位置
        x = this.offsetLeft;
        y = this.offsetTop;
      });
      div.addEventListener("touchmove", function (e) {
        // 2.计算手指的移动距离，手指移动之后的坐标减去手指一开始触摸的坐标
        var moveX = e.targetTouches[0].pageX - starstX;
        var moveY = e.targetTouches[0].pageY - starstY;
        // 3.移动盒子的距离 = 手指移动距离 + 盒子初始距离
        this.style.left = x + moveX + "px";
        this.style.top = y + moveY + "px";
        // 3. 手指移动完成之后最后设置阻止默认事件
        e.preventDefault();
      });
    </script>

四、class-List类名操作属性

H5新增属性：返回元素的类名（类似于jquery里面的addClass）（ie10注意兼容）

获取所有元素类名（数组形式存储）：element.classList
获取到指定下标类名：element.classList【下标值】

  <body>
    <div class="one two"></div>
    <script>
      var div = document.querySelector("div");
      console.log(div.classList);//返回数组形式存储多个类名
      console.log(div.classList[0]);//可以单独取出来
    </script>
  </body>

添加类名：element.classList.add('类名') （不同于className的覆盖方式）
移除类名：element.classList.remove('类名')
切换类名：element.classList.toggle('类名')

1. 案例：开关灯切换类名

    //设置一个样式类名，用来切换
    <body>
        <button>开关灯</button>
        <div class="one two"></div>
        <script>
          var div = document.querySelector("div");
          console.log(div.classList);
          console.log(div.classList[0]);
          var btn = document.querySelector("button");
          btn.addEventListener("click", function () {
          document.body.classList.toggle("bj");
      });
    </script>

五、click延迟解决方案

问题：移动端click事件有300ms的延迟，原因是移动屏幕双击（300ms）会缩放页面

解决方案：

1. 窗口禁用缩放

<meta name="viewport" content=" user-scalable=no"/>

2. touch事件解决

触摸：记录当前接触时间
离开：用离开的时间减去触摸的时间
如果小于150ms，并没有滑动过屏幕，那么我们就定义为点击

3. 常用方式，利用fastclass插件

下载地址：

GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIsPolyfill to remove click delays on browsers with touch UIs - GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIshttps://github.com/ftlabs/fastclick

使用方式:
- 下载插件之后引入
- 赋值以下代码到内置js里面
- 然后继续正常执行

    if ("addEventListener" in document) {
        document.addEventListener(
          "DOMContentLoaded",
          function () {
            FastClick.attach(document.body);
          },
          false
        );
      }

六、插件简单讲解

1. 移动端常用轮播图 swiper

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

2. 使用步骤

Swiper使用方法 - Swiper中文网

下载插件
插件引入页面
- 先引入swiper插件
- 再引入自己的js
网页中浏览需要的页面效果
文件demos中查找对应的文件并查看源代码
cv大法
语法规范：
- cv--HTML
- cv--JS外部js文件需要设置加载事件
- 调试修改api属性
- css中修改相关参数
  - 可以直接覆盖css样式
  - 也可以通过浏览器检测到样式名字直接进行修改