JavaScript移动端特效

1.触屏时间

2.触摸事件对象TouchEvent

3.拖动元素

4.移动端轮播图

    <!-- 焦点图 -->
    <div class="focus">
        <ul>
            <li><img src="upload/pic5.jpg" alt=""></li>
            <li><img src="upload/pic3.jpg" alt=""></li>
            <li><img src="upload/pic4.jpg" alt=""></li>
            <li><img src="upload/pic5.jpg" alt=""></li>
            <li><img src="upload/pic3.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

window.addEventListener('load', function() {
    // alert("1");
    // 获取元素
    var focus = this.document.querySelector('.focus');
    var ul = focus.children[0];
    // 获得focus的宽度
    var w = focus.offsetWidth;
    console.log(focus);
    console.log(w);
    // 利用定时器自动轮播图片
    var index = 0;
    var timer = this.setInterval(function() {
        index++;
        var translateX = -index * w;
        // 添加过渡效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    // 监听过渡结束的事件，transitionend
    ul.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index == 3) {
            index = 0;
            ul.style.transition = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }
    })
})

transform:translateX(1px);往左移动1px

这是结果不是过程，不是在原来基础上移动1px，而是相对盒子原来初始位置移动了1px。

transition:all .3s;过渡事件

transitionend监听过渡结束的事件

classlist返回元素类名

5.返回顶部

    <div class="goBack"></div>

.goBack {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: url(../images/back.png) no-repeat;
    background-size: 38px 38px;
}

	var goBack = this.document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    this.window.addEventListener('scroll', function() {
        if (this.window.pageYOffset >= nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function() {
        window.scroll(0, 0);
    });

6.延时解决方案

第一种对于需要缩放的页面不友好。第二种当有很多元素时非常复杂。

第三种解决方案

到该网址，进入以下fastclick文件，复制代码，到vscode新建一个js文件，将代码复制进去并引入页面中。

在页面中加入如下JavaScript代码，就不用再管了，不需要特意去调用。

7.快捷轮播图开发插件

进入官网，点击获取swiper，点击下载swiper，下载压缩包并解压，swiper文件夹中有demo文件夹，里面是轮播图的样例。
在基础演示中找到想要的效果，按照编号打开HTML文件。
打开其中一个样例的HTML文件，查看源代码，按照路径找到其所使用的 css 文件和 js 文件，复制两个文件到自己的项目中并引入页面。
复制样式、js、HTML到自己的项目中。
将以下代码复制到轮播图的div中，多余的div可删掉。


若要修改js的效果，修改粘贴的部分即可，参数的意义可以在swiper官网的API文档里搜索查找。

若要修改样式，在复制过来的swiper的样式下修改，找到对应的类名，覆盖掉粘贴过来的样式即可，若不成功可添加 !important。