移动端常见特效 JavaScript移动端

移动端常见特效

classList 属性

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

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

添加类：

element.classList.add('类名');

移除类：

element.classList.remove('类名');

切换类：

element.classList.toggle('类名');

<button>开关灯</button>
<script>
	// classList 返回元素的类名
    var div = document.querySelector('div');
    // 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>

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 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) { // 如果手指触摸和离开时间小于150ms 算点击
               callback && callback(); // 执行回调函数
           }
           isMove = false; // 取反 重置
           startTime = 0;
   	});
   }
   // 调用
   tap(div, function() { /* 执行代码 */ });
   

3. 使用插件。fastclick 插件解决 300ms 延迟