前端图标插件（前端实用插件大全）
前端图标插件（前端实用插件大全）$.cookie('the_cookie'); // cookie存在 => 'the_value'读取$.cookie('the_cookie' 'the_value' { expires: 7 });设置路径$.cookie('the_cookie' 'the_value' { expires: 7 path: '/' });
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插件
