⑴ 點擊小圖看大圖的js,如何點擊大圖，能新窗口打開原始大圖
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS特效學院|.cn|---簡單的圖片放大展示效果</title>
<style type="text/css">
.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
.spic a:hover{font-size:9px;}
.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}
</style>
<script type="text/javascript">
function seeBig(_this) {
OpenWindow = window.open("", "img", "");//打開新窗口
OpenWindow.document.write("<html>");//為新窗口設定html代碼
OpenWindow.document.write("<head>");
OpenWindow.document.write("<title>例子</title>");
OpenWindow.document.write("</head>");
OpenWindow.document.write("<body>");
OpenWindow.document.write("<img src='" + _this.parentNode.getElementsByTagName("img")[0].src + "' alt='' /");
OpenWindow.document.write("</body>");
OpenWindow.document.write("</html>");
OpenWindow.document.close();
//註：document.write 一行只能出現一種標簽
//需要 OpenWindow.document.close();
}
</script>
</head>
<body>
<table border="0" width="100%" cellspacing="3" cellpadding="3">
<tr>
<td align="center"><span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="http://www.jsweb8.cn/images/test001.jpg" width="50" height="50"></a></span></td>
<td align="center"><span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="http://www.jsweb8.cn/images/test002.jpg" width="50" height="50"></a></span></td>
<td align="center"><span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="http://www.jsweb8.cn/images/test003.jpg" width="50" height="50"></a></span></td>
<td align="center"><span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="http://www.jsweb8.cn/images/test004.jpg" width="50" height="50"></a></span></td>
</tr>
<tr>
<td colspan="4" align="center" id="viewPic"><img id="view_img" border="0" src="http://www.jsweb8.cn/images/test001.jpg"></td>
</tr>
</table>
</body>
</html>
⑵ 前端頁面的插件有哪些
工具類
方便操作對象，數組等的工具庫
underscore.js
lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建
Sugar在原生對象上增加一些工具方法
functional.js提夠了一些Curry的支持
Watch.js監視對象或屬性的變化
bacon.js函數式編程，cool
streamjs用流的方式來對數組，對象進行系列操作
非同步流程式控制制
eventproxy朴靈出品
Arbiter.js詳細
發布訂閱
qPromise風格的
Async.js
mock
Mock.js生成隨機數據和mock Ajax 請求
jquery-mockjaxmockajax請求
時間庫
moment
datejs
瀏覽器探測
調試
console-polyfill能放心的使用 console.log()之類的console方法
log讓控制台輸出的log有樣式
Konsole.js在頁面的一個元素里輸出log信息詳細
uri.jsuri操作
cookie增刪改cookie的工具庫
director前端路由庫詳細
BigDecimal.js提高精度的數字操作
JSDoc根據javascript文件中注釋的信息，生成API文檔詳細
hotkeys鍵盤事件的封裝
MD5用 MD5 的方式加密文件的庫
瀏覽器增強類
讓一些舊瀏覽器變牛逼的庫
Selectivizr讓IE 6-8一些的css3選擇器
ieBetter讓ie6-8有高級瀏覽器的特性
ExplorerCanvas讓IE8-的瀏覽器支持canvas
CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。
formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus
https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility讓舊的 IE 也支持 Flexbox
選擇器增強
Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果
未歸類
prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了
表單類
jquery-file-upload上傳文件組件詳細
zTree文件樹形視圖控制項
Treed樹編輯器。感覺展示的感覺很像思維導圖
FileAPI對文件選擇框內的文件的一些處理
表單驗證
.Validate詳細
jQuery-Validation-Engine
表單元素美化
uniform提供對下拉框，單，復選框，按鈕等表單元素的美化
select2多選下拉框
selectivity和unfirom比較類似
DropKick下拉框，單，多選。外觀比uniform好
switcheryios7風格的開關組件
nouislider用滾動條來設置/控制（音量等）
range.css美化input[type=range]元素的外觀
圖片類
holderjs生成占點陣圖片
lazyload
imagesLoaded選取的圖片都載入好後執行調回
CSSgram用CSS3的Filter實現Instagram濾鏡的庫
圖標類
Icon Font匯總
SVG做的圖標
svgicons
iconic
HYBICON帶交互效果。如 hover, click
HTML字元實體圖標
http://www.amp-what.com/
transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號
css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
fancybox彈出查看圖片，視屏等等demo
yoxview彈出查看圖片，圖片尺寸縮放很自然
圖片牆
wookmark
UI 框架
WeUI由微信官方設計團隊為微信 Web 開發量身設計。
Framework7
UI 組件類
拖拽
dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子
angular-draguladragular 官方的 angular 版本
數據可視化(圖表)
Echarts網路出品
highcharts功能強大。是收費的。
Plottable.JS基於D3的一個圖表庫
flot文檔不給力
chartJs中文文檔demo很漂亮，很清晰。比較輕量級。
ichartJs中國的一個傢伙搞的，感覺還不錯。
時間選取組件
foundation-datepicker
DatePicker一個簡單的日歷詳細
full calendar支持脫放的方式來改變待辦事宜的時間
Simple Events Calendar外觀很喜歡。收費 5$
jQuery ui datepicker經典，不是很好看
pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。
bootstrap-datepickerbootstrap風格。
dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.
自定義滾動條
perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。
iscroll在移動設備上用不錯
載入(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格組件
jsGridData Grid。詳細
backgrid基於Backbone.js的DataGrid
excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互（對內容進行排序，刪除等）
handsontable生成Excel外觀的數據
JSpreadsheets表格數據的組件庫
選取顏色
Spectrum
分享到SNS
JiaThis生成分享代碼。
編輯器
ace代碼編輯器，可以用來做demo演示
ckeditor
ueditor網路做的
tinymce對html內容進行實時的編輯
summernote在移動設備上用不錯
通知組件
notie.js
HTML5播放器
jwplayer被大量網站使用
html5media簡單的h5player，輕量級
jplayer功能強太，可換膚
展示
Impress.js各種旋轉，和奇特的體驗
fullPage全屏顯示。用滾輪來翻頁詳細
zepto.fullpage專注於移動端的fullPage.js，依賴Zepto
pagePiling和fullPage類似
turn.js做一本書，帶漂亮的翻頁的效果
幻燈
slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細
iSlider無任何插件依賴的手機平台javascript滑動組件詳細
bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。
Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網
coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。
wowslider幻燈切換時各種很炫的效果。收費。
cycle2普通的幻燈，竟然不支持垂直滾動。。。
jcarousel普通的幻燈，不兼容IE6
reveal3d滾動。做ppt相當不錯
nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題
roundabout3d切換，看的後面圖片的邊
彈出框
Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star
layer國人開發的，兼容ie6+。不喜歡其調用方式。
動畫效果
mixitup用漂亮的動畫效果來完成排序和篩選
jQuery.Marquee跑馬燈效果
quickflip卡片翻轉效果
卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里
TheaterJS模擬兩個人在屏幕上對話
midnight.js文字顏色隨著背景變，屌炸了
color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
transit對元素進行css的變換
tagcanvas3D標簽雲效果詳細
iconate圖片切換動畫
Snap.js左/右側導航的出現效果
CSS shake抖動動畫
ClickSpark.js點擊後的一些酷炫的效果
視覺差插件
scrollorama比較簡單
superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。
scrolldeck
flash
swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細
抽獎
wScratchPad刮刮卡刮獎效果
jqueryrotate旋轉插件。可以用來做轉盤抽獎效果
用戶體驗增強類
Intro.js用來介紹網站的功能很不錯。也可以做新手引導。
blockUILolding組件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出時，添加在文字末尾加省略號
jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速
AnythingZoomer放大鏡功能
美化/高亮語法代碼
google-code-prettify
DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮
please按要求隨機舒服的顏色
Awesomplete輸入的智能提示，自動補全
proTip提示。感覺比 Bootstrap 的 tip 好
Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢
動畫
velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。
SVG
Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo
walkway以動畫的方式，漸漸地畫出 SVG 的路徑。
測試
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 設備。
其他類
ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細
html2canvashtml轉化成canvas，可以用來做截圖。詳細
Ink響應式html郵件框架
性能測試
抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）
jFeed
jRss簡單版的jFeed
scriptcam與攝像頭交互
cylon.js機器人框架，支持35個平台
Masonry一個瀑布流框架
devices.css移動設備邊框的外觀。做原型的時候用不錯。
Bootstrap相關類
Bootbox.js對bootstrap的彈出框做的一些封裝
免費皮膚
AdminLTE
JS Plugins倉庫
jQuery Cards高質量的 jQuery 插件網站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各種語言的庫
OniUI去哪兒網做的一套基於Avalon的框架
常用的移動端框架
zepto.js
語法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
iscroll.js
解決頁面不支持彈性滾動，不支持fixed引起的問題~
實現下拉刷新，滑屏，縮放等功能~
最新版本已經更新到5.0
underscore.js
筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。
最新版本已經更新到1.8.2
滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~
⑶ 有辦法通過網頁上的js調用Chrome的擴展程序嗎
UEditor 有個截圖插件，可以參考
http://ueditor..com/website/onlinedemo.html
⑷ 濡備綍緙栧啓js鎻掍歡濡備綍緙栧啓js鎻掍歡鏂囦歡
js鎻掍歡鎬庝箞鐢錛
JS鎻掍歡鏄浜氶┈閫婄簿閫夌殑蹇呭囪蔣浠躲傚畠鐨勬柊鐗規ф槸:1銆佸揩閫熼忚嗭紝鍒楄〃欏甸潰鏁版嵁銆傝繘鍏ヤ換涓鎴挎簮璇︽儏欏碉紝鏃犻渶鐐瑰嚮錛孞S鎻掍歡浼氳嚜鍔ㄥ憟鐜伴〉闈㈠祵鍏ユ暟鎹:鏈堥攢閲忋佹棩閿閲忋佷環鏍煎巻鍙茶蛋鍔褲佹帓鍚嶇瓑鍏抽敭鏁版嵁銆傦紝鏂逛究瀵逛駭鍝佺敓鍛藉懆鏈熶竴鐩浜嗙劧錛屽垎鏋愮儹閿娼滃姏浜у搧錛涚煡宸辯煡褰礆紝鍚堢悊瀹夋帓鑷宸辯殑鎿嶄綔絳栫暐銆
2.瑙ｆ斁緇忚惀鍜屽ぇ浼楄惀閿鐨勫弻鎵嬨傞氳繃JS鎻掍歡鎵歸噺鍙戦侀偖浠訛紝鏁堢巼鎻愬崌80%銆傚悓鏃朵繚鐣欎簡鈥滃崟鐙鍙戦佽鋒眰鈥濈殑鍔熻兘銆傚仛綺劇粏鍖栬繍钀ョ殑鍗栧跺彲浠ラ氳繃鎺у埗鍙橀噺鏉ユ祴璇曞彂閫佹晥鏋溿侸S鎻掍歡榪樺彲浠ユ櫤鑳借瘑鍒宸茬粡鐢寵烽鎹㈣揣鐨勪拱瀹躲傚逛簬榪欎簺涔板訛紝緋葷粺浼氳嚜鍔ㄧ瓫閫夛紝涓嶅彂閫侀個璇鋒彁閱掞紝浠庤岄檷浣庡樊璇勭殑姒傜巼銆
鍏充簬js鎻掍歡鐨勬洿澶氫俊鎮錛屽緩璁鍜ㄨ涓涙灄渚﹀療鍏點侸S鎻掍歡(ChromeExtension)鏄浜氶┈閫婂崠瀹跺湀鐨勭涓嬈炬槑鏄熶駭鍝侊紝鍔熻兘寮哄ぇ錛岃捐＄畝媧併傚崠瀹跺彲浠ヤ竴閿鏌ョ湅鐜版湁浜у搧鐨勯攢閲忋佺珵浜夌▼搴︺佸巻鍙查攢鍞瓚嬪娍銆備笡鏋椾睛瀵熷叺鍊″兼櫤鑳芥暟鐮侀夊搧錛屾墦閫犵簿鍝佸簵閾猴紝閫氳繃楂樻晥鐨勮繍钀ユ妧宸у拰絳栫暐錛岃幏寰椾腑鍥藉搧鐗屽湪璺ㄧ晫嫻蜂笂鐨勬垚鍔熴傛槸浜氶┈閫婅法澧冪數鍟嗚屼笟鐨勯嗗煎搧鐗岋紝褰卞搷浜嗗叏鐞冭秴榪100涓囦簹椹閫婁粠涓氳呫傚姛鑳藉己澶э紝鍊煎緱閫夋嫨銆
jsp瑙嗛戞彃浠舵庝箞瀹炵幇錛
鎴戠粰浣犱粙緇嶄竴涓猨s鎻掍歡錛孊ootstrap妯℃佹嗭紙Modal錛夋彃浠訛紝浣犲彲浠ュ湪寮瑰嚭鐨勬ā鎬佹嗕笂鍔犱竴涓閫夋嫨鎸夐挳鐨刪tml浠ｇ爜錛岃繖閲岀粰浣犳彁渚涗簡涓ょ嶆柟寮忎竴縐嶆槸闈欐佹ā鎬佹嗭紝涓縐嶆槸鍔ㄦ佹ā鎬佹嗘ā鎬佹嗭紙Modal錛夋槸瑕嗙洊鍦ㄧ埗紿椾綋涓婄殑瀛愮獥浣撱傞氬父錛岀洰鐨勬槸鏄劇ず鏉ヨ嚜涓涓鍗曠嫭鐨勬簮鐨勫唴瀹癸紝鍙浠ュ湪涓嶇誨紑鐖剁獥浣撶殑鎯呭喌涓嬫湁涓浜涗簰鍔ㄣ傚瓙紿椾綋鍙鎻愪緵淇℃伅銆佷氦浜掔瓑銆傞潤鎬佹ā鎬佹
寮濮嬫紨紺烘ā鎬佹
鍦ㄨ繖閲屾坊鍔犻夋嫨鎸夐挳
鍔ㄦ佹ā鎬佹
寮濮嬫紨紺烘ā鎬佹
鎸変笅ESC鎸夐挳閫鍑恆傚湪榪欓噷娣誨姞閫夋嫨鎸夐挳銆
寮哄ぇ鍒╃敤JS搴旂敤鐨凧avascript緗戞牸鎻掍歡鏈夊摢浜涘憿錛
宸ュ叿綾
鏂逛究鎿嶄綔瀵硅薄錛屾暟緇勭瓑鐨勫伐鍏峰簱
underscore.js
lo-dash涓巙nderscore.js鐨刟pi鍩烘湰涓鑷淬備笌underscore姣斿叾浼樺娍鏄錛屾晥鐜囬珮錛涘彲鑷瀹氫箟鏋勫緩
Sugar鍦ㄥ師鐢熷硅薄涓婂炲姞涓浜涘伐鍏鋒柟娉
functional.js鎻愬熶簡涓浜汣urry鐨勬敮鎸
Watch.js鐩戣嗗硅薄鎴栧睘鎬х殑鍙樺寲
bacon.js鍑芥暟寮忕紪紼嬶紝cool
streamjs鐢ㄦ祦鐨勬柟寮忔潵瀵規暟緇勶紝瀵硅薄榪涜岀郴鍒楁搷浣
寮傛ユ祦紼嬫帶鍒
eventproxy鏈寸伒鍑哄搧
Arbiter.js璇︾粏
鍙戝竷璁㈤槄
qPromise椋庢牸鐨
Async.js
mock
Mock.js鐢熸垚闅忔満鏁版嵁鍜宮ockAjax璇鋒眰
jquery-mockjaxmockajax璇鋒眰
鏃墮棿搴
moment
datejs
嫻忚堝櫒鎺㈡祴
Bowser鎺㈡祴鍏蜂綋嫻忚堝櫒鍜岀増鏈
ua-parser-js鎺㈡祴鍏蜂綋嫻忚堝櫒鍜岀増鏈錛屾搷浣滅郴緇燂紝璁懼囩被鍨嬬瓑
璋冭瘯
console-polyfill鑳芥斁蹇冪殑浣跨敤console.log()涔嬬被鐨刢onsole鏂規硶
log璁╂帶鍒跺彴杈撳嚭鐨刲og鏈夋牱寮
Konsole.js鍦ㄩ〉闈㈢殑涓涓鍏冪礌閲岃緭鍑簂og淇℃伅璇︾粏
uri.jsuri鎿嶄綔
cookie澧炲垹鏀筩ookie鐨勫伐鍏峰簱
director鍓嶇璺鐢卞簱璇︾粏
BigDecimal.js鎻愰珮綺懼害鐨勬暟瀛楁搷浣
JSDoc鏍規嵁javascript鏂囦歡涓娉ㄩ噴鐨勪俊鎮錛岀敓鎴怉PI鏂囨。璇︾粏
hotkeys閿鐩樹簨浠剁殑灝佽
MD5鐢∕D5鐨勬柟寮忓姞瀵嗘枃浠剁殑搴
嫻忚堝櫒澧炲己綾
璁╀竴浜涙棫嫻忚堝櫒鍙樼墰閫肩殑搴
Selectivizr璁㊣E6-8涓浜涚殑css3閫夋嫨鍣
ieBetter璁﹊e6-8鏈夐珮綰ф祻瑙堝櫒鐨勭壒鎬
ExplorerCanvas璁㊣E8-鐨勬祻瑙堝櫒鏀鎸乧anvas
CSS3Pie璁㊣E6-9鏀鎸乥order-radious,box-shadow,linear-gradient銆傚彲浠ヤ嬌鐢.htc鏂囦歡錛堟敞鎰廙inetype錛夋垨.js鏂囦歡銆傚湪鐢≒ie.js鏃訛紝box-radious鐨勫厓緔犳湁鑳屾櫙鑹叉椂錛屼笉鏄劇ず鑳屾櫙鑹層傘傘
formFive璁╂棫鐨勬祻瑙堝櫒鏀鎸丠TML5琛ㄥ崟鐨勪竴浜涚壒鎬э紝濡俻laceholder,autofocus
https://github.com/anselmh/object-fit璁╂祻瑙堝櫒鏀鎸乷bject-fit榪檆ss瑙勫垯
HTML5CrossBrowserPolyfills涓鍫哖olyfills
flexibility璁╂棫鐨処E涔熸敮鎸丗lexbox
閫夋嫨鍣ㄥ炲己
Lining.js璁╂祻瑙堝櫒瀹炵幇綾諱技::nth-line(),::nth-last-line()鐨勬晥鏋
鏈褰掔被
prefixfree鐢ㄤ簡瀹冿紝鍐檆ss鏃訛紝灝變笉闇瑕佸姞嫻忚堝櫒鐨勫墠緙浜
琛ㄥ崟綾
jquery-file-upload涓婁紶鏂囦歡緇勪歡璇︾粏
zTree鏂囦歡鏍戝艦瑙嗗浘鎺т歡
Treed鏍戠紪杈戝櫒銆傛劅瑙夊睍紺虹殑鎰熻夊緢鍍忔濈淮瀵煎浘
FileAPI瀵規枃浠墮夋嫨妗嗗唴鐨勬枃浠剁殑涓浜涘勭悊
琛ㄥ崟楠岃瘉
.Validate璇︾粏
jQuery-Validation-Engine
琛ㄥ崟鍏冪礌緹庡寲
uniform鎻愪緵瀵逛笅鎷夋嗭紝鍗曪紝澶嶉夋嗭紝鎸夐挳絳夎〃鍗曞厓緔犵殑緹庡寲
select2澶氶変笅鎷夋
selectivity鍜寀nfirom姣旇緝綾諱技
DropKick涓嬫媺妗嗭紝鍗曪紝澶氶夈傚栬傛瘮uniform濂
switcheryios7椋庢牸鐨勫紑鍏崇粍浠
nouislider鐢ㄦ粴鍔ㄦ潯鏉ヨ劇疆/鎺у埗錛堥煶閲忕瓑錛
range.css緹庡寲input鍏冪礌鐨勫栬
鍥劇墖綾
holderjs鐢熸垚鍗犱綅鍥劇墖
lazyload
imagesLoaded閫夊彇鐨勫浘鐗囬兘鍔犺澆濂藉悗鎵ц岃皟鍥
CSSgram鐢–SS3鐨凢ilter瀹炵幇Instagram婊ら暅鐨勫簱
鍥炬爣綾
IconFont奼囨
SVG鍋氱殑鍥炬爣
svgicons
iconic
HYBICON甯︿氦浜掓晥鏋溿傚俬over,click
HTML瀛楃﹀疄浣撳浘鏍
http://www.amp-what.com/
transformicons鍥炬爣鐐瑰嚮鏃訛紝浼氭湁涓浜涘彉鎹㈡晥鏋溿傚傦紝鍔犲彿鍙樻垚鍙夊彿
css3patternscss3鍋氱殑鍙騫抽摵綰圭悊銆傛祻瑙堝櫒鍏煎規т笉濂姐
嫻忚堝浘鐗
fancybox寮瑰嚭鏌ョ湅鍥劇墖錛岃嗗睆絳夌瓑demo
yoxview寮瑰嚭鏌ョ湅鍥劇墖錛屽浘鐗囧昂瀵哥緝鏀懼緢鑷鐒
鍥劇墖澧
wookmark
UI妗嗘灦
WeUI鐢卞井淇″畼鏂硅捐″洟闃熶負寰淇Web寮鍙戦噺韜璁捐°
Framework7
UI緇勪歡綾
鎷栨嫿
dragula鏀鎸丏raggable錛孌ropable鍜孲ortable銆傛劅瑙夋瘮jqueryUI鐨勮交閲忕駭錛屽ソ鐢ㄧ殑鏍峰瓙
angular-draguladragular瀹樻柟鐨刟ngular鐗堟湰
鏁版嵁鍙瑙嗗寲(鍥捐〃)
Echarts鐧懼害鍑哄搧
highcharts鍔熻兘寮哄ぇ銆傛槸鏀惰垂鐨勩
Plottable.JS鍩轟簬D3鐨勪竴涓鍥捐〃搴
flot鏂囨。涓嶇粰鍔
chartJs涓鏂囨枃妗demo寰堟紓浜錛屽緢娓呮櫚銆傛瘮杈冭交閲忕駭銆
ichartJs涓鍥界殑涓涓瀹朵紮鎼炵殑錛屾劅瑙夎繕涓嶉敊銆
鏃墮棿閫夊彇緇勪歡
foundation-datepicker
DatePicker涓涓綆鍗曠殑鏃ュ巻璇︾粏
fullcalendar鏀鎸佽劚鏀劇殑鏂瑰紡鏉ユ敼鍙樺緟鍔炰簨瀹滅殑鏃墮棿
SimpleEventsCalendar澶栬傚緢鍠滄銆傛敹璐5$
jQueryuidatepicker緇忓吀錛屼笉鏄寰堝ソ鐪
pickadate杞婚噺綰э紝鎵嬫満鍙嬪ソ鐨勶紝婕備寒銆備絾璨屼技鍙鑳藉湪寮瑰嚭灞備腑鏄劇ず錛岃屾病鏈変笅鎷夎繖縐嶆柟寮忔樉紺恆
zebra-datepicker鍙閰嶇疆鎬у緢寮恆備絾璨屼技鍙鑳藉湪寮瑰嚭鍦ㄥ彸涓婃柟銆傘傘
bootstrap-datepickerbootstrap椋庢牸銆
dateRangePicker閫夊彇鏃墮棿孌點俠ootstrap椋庢牸銆傝ョ粍浠朵緷璧朤witterBootstrap,Moment.js鍜宩Query.
鑷瀹氫箟婊氬姩鏉
perfectscrollbar杞婚噺綰х殑婊氬姩鏉°傚栬備笌mac涓奵hrome鐨勬粴鍔ㄦ潯涓鏍楓
iscroll鍦ㄧЩ鍔ㄨ懼囦笂鐢ㄤ笉閿
鍔犺澆(Loding)鏁堟灉
CSSSpinnersCSS鍋氱殑
Loaders.cssCSS鍋氱殑
琛ㄦ牸緇勪歡
jsGridDataGrid銆傝︾粏
backgrid鍩轟簬Backbone.js鐨凞ataGrid
excellentexport鎶婅〃鏍肩殑鍐呭圭敓鎴恊xcel銆傚吋瀹笷irefox,Chrome,IE6+
datatables琛ㄦ牸鍙浜や簰錛堝瑰唴瀹硅繘琛屾帓搴忥紝鍒犻櫎絳夛級
handsontable鐢熸垚Excel澶栬傜殑鏁版嵁
JSpreadsheets琛ㄦ牸鏁版嵁鐨勭粍浠跺簱
閫夊彇棰滆壊
Spectrum
鍒嗕韓鍒癝NS
JiaThis鐢熸垚鍒嗕韓浠ｇ爜銆
緙栬緫鍣
ace浠ｇ爜緙栬緫鍣錛屽彲浠ョ敤鏉ュ仛demo婕旂ず
ckeditor
ueditor鐧懼害鍋氱殑
tinymce瀵筯tml鍐呭硅繘琛屽疄鏃剁殑緙栬緫
summernote鍦ㄧЩ鍔ㄨ懼囦笂鐢ㄤ笉閿
閫氱煡緇勪歡
notie.js
HTML5鎾鏀懼櫒
jwplayer琚澶ч噺緗戠珯浣跨敤
html5media綆鍗曠殑h5player錛岃交閲忕駭
jplayer鍔熻兘寮哄お錛屽彲鎹㈣偆
灞曠ず
Impress.js鍚勭嶆棆杞錛屽拰濂囩壒鐨勪綋楠
fullPage鍏ㄥ睆鏄劇ず銆傜敤婊氳疆鏉ョ炕欏佃︾粏
zepto.fullpage涓撴敞浜庣Щ鍔ㄧ鐨刦ullPage.js錛屼緷璧朲epto
pagePiling鍜宖ullPage綾諱技
turn.js鍋氫竴鏈涔︼紝甯︽紓浜鐨勭炕欏電殑鏁堟灉
騫葷伅
slidesjs鎸哄ソ鐢ㄧ殑錛屽彧鏄閭ｅ夠鐏瀵艱埅鐨凜SS閮借佽嚜宸卞啓錛屽懙鍛佃︾粏
iSlider鏃犱換浣曟彃浠朵緷璧栫殑鎵嬫満騫沖彴javascript婊戝姩緇勪歡璇︾粏
bgstretcher鍏ㄥ睆騫葷伅錛屼細闅忕潃欏甸潰澶у皬鐨勫彉鍖栬屽彉鍖栥
Swiper寮婧愩佸厤璐廣佸己澶х殑縐誨姩絝瑙︽懜婊戝姩鎻掍歡Swiper涓鏂囩綉
coin-slider鍏煎笽E6銆傝洰濂界殑~銆備笉榪囧叾鍒囨崲鏂瑰紡鏄涓鍧楀潡鐨勩備笉鑳介厤緗鍒囨崲鏂瑰紡銆傘傘
wowslider騫葷伅鍒囨崲鏃跺悇縐嶅緢鐐鐨勬晥鏋溿傛敹璐廣
cycle2鏅閫氱殑騫葷伅錛岀珶鐒朵笉鏀鎸佸瀭鐩存粴鍔ㄣ傘傘
jcarousel鏅閫氱殑騫葷伅錛屼笉鍏煎笽E6
reveal3d婊氬姩銆傚仛ppt鐩稿綋涓嶉敊
nodePPT鍥戒漢鍋氱殑錛屽仛ppt涔熺浉褰撲笉閿欍傛湁浜涙柟闈㈡瘮reveal鍋氱殑榪樺ソ銆備絾鐢熸垚瀵煎嚭鐨刪tml鏈変簺闂棰
roundabout3d鍒囨崲錛岀湅鐨勫悗闈㈠浘鐗囩殑杈
寮瑰嚭妗
Magnific-Popup鍏煎筆C錛孧obile銆傝繕涓嶉敊錛屾湁5k+鐨剆tar
layer鍥戒漢寮鍙戠殑錛屽吋瀹筰e6+銆備笉鍠滄㈠叾璋冪敤鏂瑰紡銆
鍔ㄧ敾鏁堟灉
mixitup鐢ㄦ紓浜鐨勫姩鐢繪晥鏋滄潵瀹屾垚鎺掑簭鍜岀瓫閫
jQuery.Marquee璺戦┈鐏鏁堟灉
quickflip鍗＄墖緲昏漿鏁堟灉
鍗＄墖緲昏漿鏁堟灉2鍏煎規у彲浠ャ傚啓鐨勬瘮杈冪畝鍗曪細1錛屽彧鏀鎸亁鏂瑰悜緲昏漿2,綾誨悕閮芥槸瑙勫畾濂界殑3錛屽彧鑳借璋冪敤涓嬈°傞渶瑕佹敼鍐欎竴涓嬨傛垜鐨勬敼榪涚増瑙佽繖閲
TheaterJS妯℃嫙涓や釜浜哄湪灞忓箷涓婂硅瘽
midnight.js鏂囧瓧棰滆壊闅忕潃鑳屾櫙鍙橈紝_鐐鎬簡
color-animationjquery鐨勯滆壊娓愬彉鍔ㄧ敾鎻掍歡銆俲query鐨勫姩鐢諱笉鏀鎸侀滆壊鍊肩殑鍙樺寲銆傛敼搴撴彁渚涗簡榪欎釜鏀鎸併
transit瀵瑰厓緔犺繘琛宑ss鐨勫彉鎹
tagcanvas3D鏍囩句簯鏁堟灉璇︾粏
iconate鍥劇墖鍒囨崲鍔ㄧ敾
Snap.js宸/鍙充晶瀵艱埅鐨勫嚭鐜版晥鏋
CSSshake鎶栧姩鍔ㄧ敾
ClickSpark.js鐐瑰嚮鍚庣殑涓浜涢叿鐐鐨勬晥鏋
瑙嗚夊樊鎻掍歡
scrollorama姣旇緝綆鍗
superscrollorama鑳藉仛鐨勬晥鏋滄洿澶氾紝浣嗚佺敤絎涓夋柟Tween鐨勫簱錛屼嬌鐢ㄨ搗鏉ユ瘮杈冨嶆潅銆
scrolldeck
flash
swfobj鑳藉熻嚜鍔ㄦ嫻婸C銆丮ac鏈哄櫒涓婂悇縐嶄富嫻佹祻瑙堝櫒瀵笷lash鎻掍歡鐨勬敮鎸佹儏鍐點傚畠浣垮緱鎻掑叆Flash濯掍綋璧勬簮灝介噺綆鎹楓佸畨鍏ㄣ傝屼笖瀹冩槸闈炲父絎﹀悎鎼滅儲寮曟搸浼樺寲鐨勫師鍒欑殑銆傛ゅ栵紝瀹冭兘澶熼伩鍏嶆偍鐨凥TML銆乆HTML涓鍑虹幇object銆乪mbed絳夐潪鏍囧噯鏍囩撅紝浠庤岀﹀悎鏇村姞鏍囧噯銆傝︾粏
鎶藉
wScratchPad鍒鍒鍗″埉濂栨晥鏋
jqueryrotate鏃嬭漿鎻掍歡銆傚彲浠ョ敤鏉ュ仛杞鐩樻娊濂栨晥鏋
鐢ㄦ埛浣撻獙澧炲己綾
Intro.js鐢ㄦ潵浠嬬粛緗戠珯鐨勫姛鑳藉緢涓嶉敊銆備篃鍙浠ュ仛鏂版墜寮曞箋
blockUILolding緇勪歡銆
simple-hint鎻愮ず淇℃伅銆傜敤css鍋氱殑銆傚吋瀹規IE9+銆
dotdotdot鏂囧瓧婧㈠嚭鏃訛紝娣誨姞鍦ㄦ枃瀛楁湯灝懼姞鐪佺暐鍙
jQuery-menu-aim浜岀駭鑿滃崟鐨勫垏鎹㈠侫mazon涓婚〉涓婁竴鏍瘋繀閫
AnythingZoomer鏀懼ぇ闀滃姛鑳
緹庡寲/楂樹寒璇娉曚唬鐮
google-code-prettify
DlHighlight浠呮敮鎸丣avaScript銆丆SS銆乆ML銆丠TML榪4璇娉曢珮浜
please鎸夎佹眰闅忔満鑸掓湇鐨勯滆壊
Awesomplete杈撳叆鐨勬櫤鑳芥彁紺猴紝鑷鍔ㄨˉ鍏
proTip鎻愮ず銆傛劅瑙夋瘮Bootstrap鐨則ip濂
Hammerjs鎵嬪娍搴撱傚皝瑁呬簡Swipe,Tap,Pinch,Pan絳夋墜鍔
鍔ㄧ敾
velocity鎻愰珮Jquery鍔ㄧ敾鐨勬ц兘銆備互鍙婇滆壊鍔ㄧ敾涔嬬被鐨勬柊鐗規с
SVG
Snap.svg鎿嶄綔SVG鐨凧S搴撱傚彿縐癝VG鐨刯Query銆俤emo
walkway浠ュ姩鐢葷殑鏂瑰紡錛屾笎娓愬湴鐢誨嚭SVG鐨勮礬寰勩
嫻嬭瘯
Mocha
Chai
Should
Snoion
DeviceMock.jsmock璁懼囥
鍏朵粬綾
ZeroClipboard灝嗗唴瀹瑰嶅埗鍒板壀鍒囨澘鍏煎逛富嫻佹祻瑙堝櫒鐨勮В鍐蟲柟妗堣︾粏
html2canvashtml杞鍖栨垚canvas錛屽彲浠ョ敤鏉ュ仛鎴鍥俱傝︾粏
Ink鍝嶅簲寮廻tml閭浠舵嗘灦
鎬ц兘嫻嬭瘯
鎶撳彇錛岃В鏋怰SS鍐呭癸紙涓嶈兘璺ㄥ煙錛屾墍浠ュ悗鍙拌佸仛浠ｇ悊錛屾墍璋撶殑瑙ｆ瀽Rss鍏跺疄灝辨槸瑙ｆ瀽xml錛
jFeed
jRss綆鍗曠増鐨刯Feed
scriptcam涓庢憚鍍忓ご浜や簰
cylon.js鏈哄櫒浜烘嗘灦錛屾敮鎸35涓騫沖彴
Masonry涓涓鐎戝竷嫻佹嗘灦
devices.css縐誨姩璁懼囪竟妗嗙殑澶栬傘傚仛鍘熷瀷鐨勬椂鍊欑敤涓嶉敊銆
Bootstrap鐩稿叧綾
Bootbox.js瀵筨ootstrap鐨勫脊鍑烘嗗仛鐨勪竴浜涘皝瑁
鍏嶈垂鐨鑲
AdminLTE
JSPlugins浠撳簱
jQueryCards楂樿川閲忕殑jQuery鎻掍歡緗戠珯
jster
nodemoles
YOUMIGHTNOTNEEDJQUERYPLUGINS涓嶄緷璧杍Query鐨刯s鎻掍歡銆
awesome-nodejs
Libraries.io鍚勭嶈璦鐨勫簱
OniUI鍘誨摢鍎跨綉鍋氱殑涓濂楀熀浜嶢valon鐨勬嗘灦
甯哥敤鐨勭Щ鍔ㄧ妗嗘灦
zepto.js
璇娉曚笌jquery鍑犱箮涓鏍鳳紝浼歫query鍩烘湰浼歾epto~
鏈鏂扮増鏈宸茬粡鏇存柊鍒1.16
iscroll.js
瑙ｅ喅欏甸潰涓嶆敮鎸佸脊鎬ф粴鍔錛屼笉鏀鎸乫ixed寮曡搗鐨勯棶棰榽
瀹炵幇涓嬫媺鍒鋒柊錛屾粦灞忥紝緙╂斁絳夊姛鑳絶
鏈鏂扮増鏈宸茬粡鏇存柊鍒5.0
underscore.js
絎旇呮病鐢ㄨ繃錛屼笉榪囧惉璇村ソ鐢錛屾帹鑽愮粰澶у秪
璇ュ簱鎻愪緵浜嗕竴鏁村楀嚱鏁板紡緙栫▼鐨勫疄鐢ㄥ姛鑳斤紝浣嗘槸娌℃湁鎵╁睍浠諱綍JavaScript鍐呯疆瀵硅薄銆
鏈鏂扮増鏈宸茬粡鏇存柊鍒1.8.2
婊戝睆妗嗘灦
閫傚悎涓婁笅婊戝睆銆佸乏鍙蟲粦灞忕瓑婊戝睆鍒囨崲欏甸潰鐨勬晥鏋
slip.js
iSlider.js
fullpage.js
swiper.js
flex甯冨矓
flex甯冨矓鐩鍓嶅彲浣跨敤鍦ㄧЩ鍔ㄤ腑錛屽苟闈炴墍鏈夌殑璇娉曢兘鍏ㄥ吋瀹癸紝鏁堟灉鑹濂絶
JavaScript鐨刯Query搴撴彃浠剁殑綆瑕佸紑鍙戞寚鍗楋紵
1.琛ㄥ崟楠岃瘉鎻掍歡validate.js
2.琛ㄦ牸鎻掍歡dateTables.js
3.寮瑰眰鎻掍歡layer.js
4.鍒嗛〉鎻掍歡layPage.js5涓嬫媺妗嗛夋嫨鎻掍歡select2.jschosen.js6.鍥劇墖鍏ㄥ睆鏄劇ずsupersized.js7.澶嶉夋嗗崟閫夋寜閽緹庡寲iCheck.js琛ㄥ崟緹庡寲鎻掍歡uniform.js閲屼篃琛岋紝鍙浠ョ湅鐪8.鍏ㄥ睆婊氬姩鎻掍歡fullPage.js9.涓婁紶鎻掍歡zyUpload.js10.鏍戞彃浠秡Tree.js11.琛ㄥ崟鎻愪氦鎻掍歡ajaxForm.js12.杈撳叆鏍煎紡鍖栨彃浠秈nputmask.jsmaskedinput.js13.鍚戝兼彃浠秄ormToWizard.js14.鏃ュ巻鎻掍歡fullcalendar.js15.鎵嬫満絝婊氬姩鎻掍歡iscroll.js
tms-0.4.1.js榪欎釜js鎻掍歡鏄鐢ㄦ潵鍋氫粈涔堢殑錛
璨屼技鏄鐢ㄤ綔鍥劇墖婊戝姩騫垮憡鐨勶紝綾諱技浜庝含涓滈栭〉閭ｇ嶏紝
⑸ 什麼是WebPack，為什麼要使用它
1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for proction (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的參數
]
}
};
要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 現在可以寫 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};