3d parallax background（3dparallaxbackground汉化版）

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: , domain: &#;jquery.com&#;, secure: true });

//var date = new Date();

//date.setTime(date.getTime() + (3 * * * * )); //三天后的这个时候过期

//$.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-.js&#;></script>

<div class=&#;numscroller&#; data-slno=&#;1&#; data-min=&#;0&#; data-max=&#;&#; data-delay=&#;8&#; data-increment=&#;1&#;></div>

div中必须有类 numscroller 和 data-slno data-min data-max data-delay data-increment 等属性

JS初始化

jQuery(function($) {

$(&#;.timer&#;).countTo({

lastSymbol:&#; %&#;, //显示在最后的字符

from: 0, // 开始时的数字

speed: , // 总时间

refreshInterval: , // 刷新一次的时间

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插件（兼容移动端）

.jQuery Easy Background Resize / easyBackground.js 背景图片插件

.jbooklet.js ---书本真实翻页插件

.parallax.js---3D立体视觉场景动画效果跟随鼠标摆动

.shine.js---文字阴影插件

.jquery动画文字插件textillate-master / core_plugin / custom_effect

.Owl Carousel兼容所有浏览器的幻灯片插件

.漂亮的滚动条自定义插件--jquery.nicescroll.js

.支持图片上传预览的uploadPreview.js插件