常用JS库整理
1.单页式滚动动画(PC端常见JS)###
-
skrollr.js (感觉前几年在国外使用率比较高)
e.g:
国外网站:
1)http://www.flatvsrealism.com/
2 ) http://www.fontwalk.de/03/
3 ) http://fluger.com/
4 ) http://www.evanshalshaw.com/more/bondcars/c25.html
5 ) http://guibento.com/ -
ScrollMagic
e.g:
1)http://buntspenden.bleech.de/de/
2 ) http://www.flyacts.com/multi-channel-app/
3 ) http://alfredservice.com/
4 ) http://appliancetecltd.com/
5 ) http://www.lempens-design.com/
JQuery 插件
-
jQuery Waypoints.js
(兼容zepto)
e.g:
http://guibento.com/
2.canvas###
-
creat.js (国内常用,其中preload.js作为预加载的JS使用率最高)
-
pixi.js
e.g:
1 ) http://www.flatvsrealism.com/
2)http://www.fontwalk.de/03/canvas下的矢量图像绘制
-
paper.js
矢量图型绘制脚本,即使AI脚本环境的Scriptographer
e.g:
http://fluger.com/error ( 该网站的404页面 ) -
jQuery.tagcanvas
JQuery插件
e.g:
http://budoucnost.utb.cz/
3.翻页式JS###
JQuery插件
-
jquery.fullPage.js
国内常用的一款
e.g:
1 ) 百度百科——年终盘点
2 ) 网易邮箱6.0版:改变,不止所见
3 ) 邮箱大师2014
4)腾讯互动娱乐-腾讯互动娱乐官方网站-让想象绽放
4.SWF控制###
JQuery插件
5.GIF实现###
- css3实现
(使用keyframes控制background-position的变化,在animation配合steps使用)
-js实现(配合控制 background-position)
【以上两种实现方法详情见\Component\frames animation文件下的frames animation.html】
JQuery插件
-
jani.js
e.g:
国外网站:
1)http://www.flatvsrealism.com/
6.检测&优雅降级###
-
Modernizr.js
简单介绍:
HTML5 Modernizr - HTML5 中文教程 - 极客学院Wiki
http://wiki.jikexueyuan.com/project/html5/modernizr.html
7.兼容###
- html5shiv.js
(兼容IE6-8)
8.数字动画效果###
9.美化滚动条###
JQuery插件
-
jquery.nicescroll.js
(还有对应的插件jquery.nicescroll.plus.js)
e.g:
http://www.flatvsrealism.com/
10.图片预加载###
- preload.js (creat.js的)
JQuery插件
-
jQueryLoader
e.g:
http://www.fontwalk.de/03/
11.UI###
-
JQuery UI
jQuery UI 教程 | 菜鸟教程
http://www.runoob.com/jqueryui/jqueryui-tutorial.html
e.g:
http://budoucnost.utb.cz/
12. JS模块化###
- require.js
- sea.js
- vue.js
-
head.js
相比于前者,更加轻量级,适合用于小型项目
e.g:
http://whois.wildlife.la/
13.布局###
14.3D###
15. SWF 转换 HTML###
- swiffy.js
e.g:
http://17grad.com/like
16.动画###
JQuery插件
-
Velocity.js
实现页面元素中的飞入,飞出,旋转、颜色变换,esaing效果的jquery动画插件
e.g:
http://budoucnost.utb.cz/
17.鼠标滚动方向与位置判断###
JQuery.waypoints
一款非常不错的jQuery滚动监听插件Waypoints.js插件_Jquery教程_B5教程网
http://www.bcty365.com/content-47-2583-1.html
非常用###
sprintf.js
JS中实现sprintf
sizzle.js
解析jQuery DOM的选择器引擎,13年左右在国外PC网站比较常见,当时号称业界第一快,可不依赖JQuery单独使用
e.g:
http://www.fontwalk.de/03/
jQuery Form.js
JQuery插件 - 表单插件
e.g:
http://guibento.com/
jquery.isotope.js
JQuery插件 - 分类过滤与排序布局插件
e.g:
http://guibento.com/
jquery-ui-rotatable
JQuery插件 - div随鼠标滚动而旋转(此时屏幕无滚动条)
e.g:
http://budoucnost.utb.cz/
国内:
1.网易###
PC端:
1.全屏式动画#####
-
jquery(mixNIE).1.11.js
(1.9以上版本不兼容IE8 ,推测是为了兼容性) -
snsShare.js
网易的分享插件 -
jquery.swfobject.1-1-1.js
jquery 的swf插件 -
jquery.mousewheel.min.js
jquery的滚动事件插件 -
jquery.fullPage.js
jquery的全屏swpie类插件
案例:
1)史诗级新坐骑毒魇来袭-《天谕》官方网站
http://tianyu.163.com/2016/duyan/?from=banner
2.腾讯###
PC端:
1.下拉翻页式
-
jquery-1.12.4.min.js
(1.9以上版本不兼容IE8 ,推测是为了兼容性) -
jquery.easing.1.3.js
jquery的easing插件 -
jquery.fullPage.js
jquery的全屏swpie类插件 -
milo-min.js
这是个短小精悍的样式选择库,如果用jquery只是用来选取样式对象的,那么,用mini吧,更小更快
案例:
1)灵芝派对-剑灵官方网站-腾讯游戏
http://bns.qq.com/act/a20161120version/index.html#home