JavaScript学习7-2：移动端网页特效（轮播图、返回顶部、插件、框架、本地存储）

JavaScript学习7-2：移动端网页特效

一、触屏事件

触屏事件：

触屏事件对象：

拖动元素：

二、常见特效

移动端轮播图（携程首页）

携程首页的焦点图模块

classList使用

    <script>
        var div = document.querySelector('div');
        //1. 添加类名 注意和className不同 不是覆盖类名 而是在后面追加
        div.classList.add('three'); //类名添加不用加.
        //2. 删除类名
        div.classList.remove('one');

        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //3. 切换类名 有->没有 没有->有
            document.body.classList.toggle('bg');
        })
    </script>

返回顶部（携程首页）

轮播图效果：携程首页

click延时解决方案

使用fastclick插件是最常用的

三、常用开发插件

（1）fastclick插件

（2）Swiper插件

使用：京东首页

（3）其他插件

（4）视频插件zy.media.js

四、常用开发框架

（1）Bootstrap

jQuery、Vue、React、angular （另外学习）

五、本地存储

（1）window.sessionStorage

（2）window.localStorage

两者最大的区别就是localStorage是永久存储，并且可以在同一浏览器的不同页面进行使用，但是sessionStorage在页面关闭时就清除数据，并且只能本页面使用