JavaScript --------WebS APIs学习之移动端网页特效（移动端插件）

1.移动端轮播图

      功能： 1.可以自动播放图片

                  2.手指可以拖动播放轮播图

classList 属性

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

         该属性用于在元素中添加，移除及切换CSS类。有以下方法：

          添加类： element.classList.add( ' 类名 ' ) ；

          移除类：element.classList.remove( ' 类名 ' );

          切换类：element.classList.toggle( ' 类名 ' )；有则删除无则增加

click延时解决方案

移动端click 事件会有300ms延时，原因是移动端屏幕双击会缩放（double tap zoom）页面

解决方案 ：

            1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

             

             2.利用touch事件自己封装这个事件解决300ms延迟

              原理：1.当我们手指触摸屏幕，记录当前触摸时间

                         2.当我们手指离开屏幕，用离开的时间减去触摸的时间

                         3.如果时间小于 150ms ，并且没有滑动过屏幕，那么我们定义为点击

         

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

                 下载网站 ：https://github.com/ftlabs/fastclick。

插件的使用

   1.fastclick 插件  https://github.com/ftlabs/fastclick。

   2. swiper 插件    https://www.swiper.com.cn/

        实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

  3. superslide  插件 http://www.superslide2.com/

         实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

  4.iscroll插件   https://github.com/cubiq/iscroll