前端实用插件大全!你值得收藏
发布在全栈开发工程师2018年9月27日view:253HTML5css3前端开发Reactweb框架前端的畅想JavaScript原型前端工程前端工程师面试HTML
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前端实用插件大全!你值得收藏

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书写

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

JavaScript部分

new WOW().init(); 如果需要自定义配置,可如下使用:

var wow = new WOW({

boxClass: ‘wow’,

animateClass: ‘animated’,

offset: 0,

mobile: true,

live: true

});

wow.init();

属性/方法类型默认值说明boxClass字符串‘wow’需要执行动画的元素的 classanimateClass字符串‘animated’animation.css 动画的 classoffset整数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>
90

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>
<input id="file_upload" name="file_upload" type="file" multiple="true"> Upload Files </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插件

更多精彩欢迎加QQ群:864305860

编程语言JavaScriptjQueryPHPCSS

编程语言JavaScriptjQueryCSSPHP

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
全栈开发工程师

往前端这条不归路再次迈进

我的收藏