web前端常用的一些插件、框架以及文档

　这篇随笔的文字解释大多数是从网站直接复制下来的，以便于更快的理解，具体的使用方法以及插件下载请进入具体的网站。如有好的插件可以留言一起学习。

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

　　参考地址：_{http://www.zeptojs.cn/}

注：如果你会使用jQuery 那么zepto就不在话下了 当然 我本人并没有使用过 

 

---

10. 滚动条插件

　　参考地址1_{http://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}

　　

转载于:https://www.cnblogs.com/buweixiu/p/6956508.html