常用JS库整理

1.单页式滚动动画(PC端常见JS)###

1. 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/

2. 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 插件

1. jQuery Waypoints.js
   (兼容zepto)
   e.g:
   http://guibento.com/

2.canvas###

1. creat.js (国内常用，其中preload.js作为预加载的JS使用率最高)

2. pixi.js
   e.g:
   1 ) http://www.flatvsrealism.com/
   2）http://www.fontwalk.de/03/

   canvas下的矢量图像绘制

3. paper.js
   矢量图型绘制脚本，即使AI脚本环境的Scriptographer
   e.g:
   http://fluger.com/error ( 该网站的404页面 )

4. raphael.js
   e.g:
   http://wybieramyklienta.pl/en

5. jQuery.tagcanvas
   JQuery插件
   e.g:
   http://budoucnost.utb.cz/

3.翻页式JS###

• swpier.js

JQuery插件

• jquery.fullPage.js
  国内常用的一款
  e.g:
  1 ) 百度百科——年终盘点
  2 ) 网易邮箱6.0版：改变，不止所见
  3 ) 邮箱大师2014
  4）腾讯互动娱乐-腾讯互动娱乐官方网站-让想象绽放

4.SWF控制###

JQuery插件

• swfobject

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.数字动画效果###

• scroller.js

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/

• jquery.imgpreload
  e.g:
  http://travis.volvotrucks.com/

11.UI###

1. JQuery UI
   jQuery UI 教程 | 菜鸟教程
   http://www.runoob.com/jqueryui/jqueryui-tutorial.html
   e.g:
   http://budoucnost.utb.cz/

2. Bookstrap

12. JS模块化###

• require.js
• sea.js
• vue.js
• head.js
  相比于前者，更加轻量级，适合用于小型项目
  e.g:
  http://whois.wildlife.la/

13.布局###

• 960grid

14.3D###

• three.js
  e.g:
  http://17grad.com/like

15. SWF 转换 HTML###

• swiffy.js
  e.g:
  http://17grad.com/like

16.动画###

1. Greenshock
2. Tween.js

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