移动端返回顶部
这节课学习的是移动端的返回顶部,当我们页面滚动到内容以后,就出现返回顶部的标志,只要我们点击就能返回到页面的顶部.
自己做的:
click延时问题:
因为我们的屏幕不知道我们是否要放大屏幕,所以会有个很短的延迟时间来判断我们是否会双击屏幕放大,但是当我们的屏幕不需要缩放时,这个延迟就成了很大的问题.
第一种方法比较简单但是有时候不适用;第二种要封装函数,非常麻烦,这时候,我们就要用到插件了.
什么是插件
JS插件是JS文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用.如轮播图和瀑布流插件.
特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小.
我们以前写的animate.js就是最简单的插件.
我们这次要用的插件就是: fastclick
我们去到官网可以找到它的源码:
全部复制粘贴下来就可以了,保存为fastclick.js文件
如何使用
我们去它的GitHub官网看看它的说明.
只要做完这两步就OK了,页面中的所有click都不会有延时问题
后面好像又要讲swiper了,但是之前已经写过了...还是写一下吧
我们看看演示
就可以看到里面有各式各样的轮播图
想要哪一个只要在下载好的文件里面找就好了
随便点一个试试
点开以后右键查看源代码
里面有结构样式和JS.
现在我们点进文件夹里的'swiper',将CSS和JS文件放进我们自己的文件夹里
接下来就是将结构复制粘贴进来:
HTML
CSS部分
JS部分
最后的效果:
除此之外,老师还介绍了两个别的插件:
下一章开始讲本地存储,比较重要,所以先结束本章
