这篇随笔的文字解释大多数是从网站直接复制下来的,以便于更快的理解,具体的使用方法以及插件下载请进入具体的网站。如有好的插件可以留言一起学习。
1. jQuery全屏滚动插件fullPage.js
fullPage.js 是一款基于jQuery全屏滚动的插件主要功能如下:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性:
- jquery 1.7+
- ie8+
- chrome
- firefox
- opera
- Safari
使用方法:
进入网站之后到最下方可以看到说明和下载。 说明是这个插件的具体使用方法,下载是需要引入的文件。
更多使用请参照:http://www.dowebok.com/demo/2014/77/
2. 页面常用的轮播以及选项卡插件
1.)swiper http://www.swiper.com.cn/demo/index.html
Swiper常用于移动端网站的内容触摸滑动. 触屏焦点图、触屏Tab切换、触屏多图切换。
swiper的使用方法:http://www.swiper.com.cn/usage/index.html
2.)superslide http://www.superslide2.com/demo.html
Supersilde常用于pc端的轮播切换等特效。
superslide的使用方法:http://www.superslide2.com/howToUse.html
superslide需要下载的文件: http://www.superslide2.com/downLoad.html
3. 页面常用的美化的弹框类插件
1.)sweetalert.js http://mishengqiang.com/sweetalert/
sweetalert无论在pc 移动 还是平板都是会居中显示,并且还可高度定制。
2.)layer.js http://layer.layui.com/
layer 是一款可以自己根据需求自定义的弹框。
4. 动画库 animate.css
下载animate.css文件之后 引用你想要的动画特效的class即可
更多使用请参照:https://daneden.github.io/animate.css/
5. 将文本复制到剪贴板 clipboard.js
只需要用在触发器元素上添加属性,就可以实现复制或者剪贴功能。
data-cliboard-target: 复制文本
<input type="text" value="http://www.cnblogs.com/buweixiu" id="bu"> <button class="btn" data-clipboard-target="#bu">复制<button>
data-clipboard-action:剪切文本
使用此属性的时候清指定是要cut还是copy内容,如果省略此属性,默认情况下使用copy
cut操作只适用与<input>和<textarea>元素
<textarea id="wen">从前有座山。。</textarea> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#wen">剪切</button>
data-clipboard-text:属性复制文本
使用此属性不需要再触发器添加一个元素,可以直接将需要复制的文本放在属性值里
<button class="btn" data-clipboard-text="从属性复制文本">复制</button>
更多使用请参照:https://clipboardjs.com/
6. 移动端弹性插件 flexible.js
可伸缩弹性布局
在开发移动端的界面 首先需要设置meta的标签如下:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
注: 想要更好的理解这个插件的使用,请先了解rem单位
更多使用请参照:https://github.com/amfe/lib-flexible
7. 文件上传插件 plupload.js
实现多种方式上传
参考地址1:http://www.plupload.com/docs/ 这个是官方地址,你可能会看不懂,如果你看不懂 你可以看下面的
参考地址2:http://www.cnblogs.com/2050/p/3913184.html 这个是别的大神整理的关于plupload.js的使用
8. 前端开发框架 bootstrap
更多使用请参照:http://v3.bootcss.com/
注:这个属于前端框架,做前端的都知道,功能比较强大,我就不多介绍了
9. 常用js类库
1.)jQuery
参考地址1:http://www.runoob.com/jquery/jquery-tutorial.html
参考地址2:http://www.jquery123.com/
2.)zepto.js
注:如果你会使用jQuery 那么zepto就不在话下了 当然 我本人并没有使用过
10. 滚动条插件
参考地址1http://cubiq.org/iscroll-5
参考地址2:https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html
11.移动端上拉刷新 下拉加载插件
移动端经常要用到数据的加载,翻页功能。有一个比较好用的插件 在git上,有几种demo,具体的使用方法也很齐全。
1)dropload
参考地址:https://github.com/ximan/dropload