TS 筆記: jQuery Plugins

jQuery Plugins

一、綜合收集整理網

  1. http://www.jqueryscript.net/ (Free jQuery Plugins and Tutorials – jQuery Script.html)有多類的外掛
  2. http://www.htmllion.com/tabtab-js-jquery-animated-tabs-plugin.html —–http://tabtab.be/
  3. http://tympanus.net/codrops/ 有多類的外掛
  4. 網頁設計大補帖 – jQuery 外掛
  5. jQuery之家

 

二、Slider幻燈片輪播展示 or Carousel多個影像旋轉展示

  1. http://kenwheeler.github.io/slick/  for RWD
  2. Flexslider – [Demo] – [Demo Responsive] – [Download]
  3. Elastislide – [Demo] – [Demo Responsive] – [Download]
  4. Responsive Image Gallery with Thumbnail Carousel – [Demo] – [Demo Responsive] – [Download]
  5. Supersized – [Demo] – [Demo Responsive] – [Download]
  6. ResponsiveSlider – [Demo] – [Demo Responsive] – [Download]
  7. wmuSlider – [Download]
  8. Camera – [Demo] – [Demo Responsive] – [Download] 切成小方塊展示
  9. Galleria – [Demo] – [Demo Responsive] – [Download]
  10. Slicebox – [Demo] – [Download] 3D立體塊旋轉
  11. FlexSlider feat. Kwiks – [Demo] – [Demo Responsive] – [Download] 寬時Accordion窄時Slider
  12. Elastic – [Demo] – [Demo Responsive] – [Download] 可動態彈出小縮圖
  13. Zoom Slider – [Demo] – [Download] 

三、Accordion折疊式面板 

  1. http://www.armagost.com/zaccordion/ for RWD 水平 Accordion
  2. http://www.umtas.ac.id/assets/js/jquery.zaccordion/responsive.html  for RWD 水平 Accordion

 

四、Zoom

  1. Portfolio Zoom Hover to zoom, click to view
  2. Image Zoom Tour 影像中局部位置再放大

 

五、Menu選單

  1. 23種Bootstrap導航菜單佈局設計jQuery插件

 

六、瀑布流

  1. 排版瀑布流插件
  2. 資料瀑布流設計

 

七、頁面捲動,背景慢移

  1. http://www.jqueryscript.net/animation/Responsive-Any-Content-Parallax-Plugin-With-jQuery-Parallux.html

 

八、jQuery 視差滾動Parallax

  1. Example —- http://makeyourmoneymatter.org/
  2. Example —- http://www.iutopi.com/
  3. Example —- http://www.culturalsolutions.co.uk/
  4. Example —- http://www.netlash-bseen.be/
  5. Example —- http://www.unfold.no/
  6. Example —- http://www.manufacturedessai.it/
  7. Example —- http://journey.lifeofpimovie.com/#!/richard-parker
  8. Showcase — https://tympanus.net/codrops/2011/03/07/parallax-usage-in-web-design/ 
  9. Theme —— http://www.sequencejs.com/themes/category/free/
  10. Plugin ——- https://tympanus.net/codrops/2011/01/03/parallax-slider/
  11. Plugin ——- https://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
  12. Plugin ——- https://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
  13. 7+ jQuery Parallax Plugin —- http://www.w3cways.com/1330.html
  14. 50+ Best jQuery Parallax Plugin —- http://www.jqueryrain.com/demo/jquery-parallax-plugin/
  15. 教學引導 —- http://rettamkrad.blogspot.tw/2013/05/blog-post.html
  16. 教學引導 —- http://www.astralweb.com.tw/parallax-scrolling/
  17. 教學引導 —- http://www.minwt.com/webdesign-dev/js/9082.html
  18. 教學引導 —- http://pixelcog.github.io/parallax.js/
  19. 官網說明—- http://dev.jonraasch.com/scrolling-parallax/examples/bug-parallax
  20. 2015年最棒的jQuery視差滾動效果教程與插件