jQuery Plugins

Map 地圖

map svg 地圖
https://github.com/markmarkoh/datamaps

google map quickly — gmaps.js
http://hpneo.github.io/gmaps/examples.html

mapjQuery tinyMap
https://code.essoduke.org/tinyMap/

視覺效果

Apple tv hover 效果 
https://www.jqueryscript.net/animation/Parallax-Hover-Tilt-Effect-Universal-Tilt.html

文字編打效果
http://macarthur.me/typeit/
https://www.cssscript.com/demo/simulate-typewriter-typing-screen-typing-js/

圖片放大
http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm

transform icons with tendy animate
http://bitshadow.github.io/iconate/

偵測背景,然後變色
http://www.kennethcachia.com/background-check/

hover效果
http://tympanus.net/Tutorials/3DHoverEffects/index5.html
http://tympanus.net/Tutorials/CaptionHoverEffects/index7.html
http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index.html
http://tympanus.net/Development/HoverEffectIdeas/

parallel
http://markdalgleish.com/projects/stellar.js/demos/

動畫 動態
https://greensock.com

Progress Loading
http://usablica.github.io/progress.js/

Mobile相關

smart banner (android & ios 偵測如果有app,就會在頂端出現下載app的東西)
https://github.com/jasny/jquery.smartbanner

hover on touch mobile
https://www.vinzenzaubry.com/demos/hoverontouch/

overscroll (touch)
http://azoff.github.io/overscroll/

Input系列

正則表達式或限制input輸入型態
https://unmanner.github.io/imaskjs/

multiselect
http://springstubbe.us/projects/demos/jquery-multiselect/
http://www.patosai.com/projects/tree-multiselect
https://select2.org/

date range picker
http://t1m0n.name/air-datepicker/docs/
http://www.daterangepicker.com/#examples
http://ctui.corneltek.com/ctdaterange/
http://t00rk.github.io/bootstrap-material-datetimepicker/

dragdealer
http://skidding.github.io/dragdealer/

dropdown tooltip
http://github.hubspot.com/drop/docs/welcome/

checkbox & radio
http://icheck.fronteed.com

Scrollbar 捲軸

內捲軸卷到底不會影響外捲軸
http://eiskis.net/scroll-scope/

客製化捲軸
https://github.com/noraesae/perfect-scrollbar

scroll trigger
https://github.com/Prinzhorn/skrollr
https://terwanerik.github.io/ScrollTrigger/http://t-scroll.com/

waypoint – trigger when scroll to an element
http://imakewebthings.com/waypoints/

scrollTo
https://github.com/hashchange/jquery.scrollable

Slider, Lightbox, Gallery, Swipe

http://flickity.metafizzy.co
http://idangero.us/swiper/#.WPOVR1N96Rt
http://owlgraphic.com/
http://jquery.malsup.com/cycle2/

Image gallery
http://sachinchoolur.github.io/lightGallery/

full screen gallery
http://www.justcapelle.com/css3-fullscreen-image-gallery/index.html

lightbox
https://fancyapps.com/fancybox/3/
https://lokeshdhakar.com/projects/lightbox2/
http://photoswipe.com/

其他

timeline
http://www.jqueryscript.net/time-clock/Timeline-Generator-jQuery-Timeline-js.html

時間變成以人性化文字顯示http://fengyuanchen.github.io/prettydate/http://momentjs.com

notice 通知
http://kunalnagar.github.io/jquery.peekABar/#demo

圖片Crop擷取
http://fengyuanchen.github.io/cropper/
https://jamesssooi.github.io/Croppr.js/
https://github.com/jonom/jquery-focuspoint

cookie記錄提醒
http://paolobasso99.github.io/herbyCookie/

lazy loding
https://github.com/callmecavs/layzr.js

評分
http://testweb3.iecworld.com/jsdemo/js/lq_js_point/

Intro to JS: Drawing & Animation
https://www.khanacademy.org/computing/computer-programming/programming

Picker.js
http://chenfengyuan.com

keyboard-delimiter
https://github.com/ameliandev/KeyboardDelimiter

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.