zoukankan      html  css  js  c++  java
  • 移动端网页特效

    触屏事件

    移动端浏览器兼容性好,不需要考虑JS的兼容问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android和iOS都有。

    常见的触屏事件如下:

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

    触摸事件对象

    触摸事件对象重点看三个常见对象列表:

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

    移动端拖动元素

    1. touchstart、touchmove、touchend可以实现拖动元素
    2. 拖动元素需要获取当前手指的坐标值,可以使用targetTouches[0]里面的pageX和pageY
    3. 移动端拖动的原理:手指移动中,计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离
    4. 手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置

    拖动元素三部曲:

    1. 触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
    2. 移动手指touchmove:计算手指的滑动距离,并且移动盒子
    3. 离开手指touchend

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

    click延时解决方案

    移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放页面

    解决方案:

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

      原理:

      1. 当手指触摸屏幕,记录当前触摸时间
      2. 当手指离开屏幕,用离去的时间减去触摸的时间
      3. 如果时间小于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 && calllback();//执行回调函数
            }
            isMove = false; //取反,重置
            startTime = 0;
        })
    }
    //调用
    	tap(div , function() { //执行代码 })
    
    1. 使用fastclick插件解决300ms延迟。

    插件特点:js插件是js文件,它一般是为了解决某个问题而专门存在,其功能单一,而且比较小。

    fastclick GitHub官网地址:fastclick

    移动端常用开发插件

    swiper插件的使用

    中文官网地址

    1. 引入插件相关文件
    2. 按照规定语法使用

    其他插件

  • 相关阅读:
    C#学习之委托和事件
    ArcGIS许可启动问题
    空间插值——克里金插值
    maven 问题解决 tools以及jconsole两个jar包 无效
    JDBC代码示例
    mysql 同一IP 产生太多终端的数据库连接导致阻塞
    apache 反向代理配置
    oracle、mysql、sql server等;流行数据库的链接驱动配置
    POI XSSF与HSSF的 使用区别
    使用IDEA开发Activiti工作流
  • 原文地址:https://www.cnblogs.com/actorhuang/p/13596535.html
Copyright © 2011-2022 走看看