前端實用插件大全
1.操作cookie的插件jquery.cookie.js
添加
$.cookie('the_cookie', 'the_value');
設置時長
$.cookie('the_cookie', 'the_value', { expires: 7 });
設置路徑
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
讀取
$.cookie('the_cookie'); // cookie存在 => 'the_value'
$.cookie('not_existing'); // cookie不存在 => null
刪除
$.cookie('the_cookie', null);
3.將cookie寫入文件
var COOKIE_NAME = 'username';
if( $.cookie(COOKIE_NAME) ){
$("#username").val( $.cookie(COOKIE_NAME) );
}
$("#check").click(function(){
if(this.checked){
$.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10, domain: 'jquery.com', secure: true });
//var date = new Date();
//date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天後的這個時候過期
//$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });
}else{
$.cookie(COOKIE_NAME, null, { path: '/' }); //刪除cookie
}
});
2.wow.js實用的滾動插件
HTML書寫
<div class="wow slideInLeft"></div>
可以加入 data-wow-duration（動畫持續時間）和 data-wow-delay（動畫延遲時間）屬性，如：
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
JavaScript部分
new WOW().init();
如果需要自定義配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
| 屬性/方法 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| boxClass | 字符串 | ‘wow’ | 需要執行動畫的元素的 class |
| animateClass | 字符串 | ‘animated’ | animation.css 動畫的 class |
| offset | 整數 | 0 | 距離可視區域多少開始執行動畫 |
| mobile | 布爾值 | true | 是否在移動設備上執行動畫 |
| live | 布爾值 | true | 異步加載的內容是否有效 |
3.numscroller.js / countUP數字滾動增加插件
HTML書寫
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/numscroller-1.0.js"></script>
<div class='numscroller' data-slno='1' data-min='0' data-max='90' data-delay='8' data-increment="1">90</div>
div中必須有類 numscroller 和 data-slno data-min data-max data-delay data-increment 等屬性
JS初始化
jQuery(function($) {
$(".timer").countTo({
lastSymbol:" %", //顯示在最後的字符
from: 0, // 開始時的數字
speed: 2000, // 總時間
refreshInterval: 10, // 刷新一次的時間
beforeSize:0, //小數點前最小顯示位數，不足的話用0代替
decimals: 2, // 小數點後的位數，小數做四捨五入
onUpdate: function() {
}, // 更新時回調函數
onComplete: function() {
for(i inarguments){
console.log(arguments[i]);
}
}
});
});
4.uploadfive.js帶進度條文件上傳插件
用法
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
篇幅有限，下面的列舉可以上網查詢
5.video.js視頻插件 + pace.min.js視頻進度條插件 + jquery.qrcode.js二維碼生成插件
6.shakejs搖一搖工具插件
7.Bootstrap transition.js 插件--平滑過渡插件
8.event.js監控事件觸發與否插件
9.swiper滾動banner插件（兼容移動端）
10.jQuery Easy Background Resize / easyBackground.js 背景圖片插件
11.jbooklet.js ---書本真實翻頁插件
12.parallax.js---3D立體視覺場景動畫效果跟隨鼠標擺動
13.shine.js---文字陰影插件
14.jquery動畫文字插件textillate-master / core_plugin / custom_effect
15.Owl Carousel兼容所有瀏覽器的幻燈片插件
16.漂亮的滾動條自定義插件--jquery.nicescroll.js
17.支持圖片上傳預覽的uploadPreview.js插件
上面插件都一一使用過，效果都不錯，當然用別人的插件，不如自己寫插件。
往前端這條不歸路再次邁進