這篇隨筆的文字解釋大多數是從網站直接復制下來的,以便於更快的理解,具體的使用方法以及插件下載請進入具體的網站。如有好的插件可以留言一起學習。
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