在這篇文章裏面, 我們列出了30個精挑細緻的Ajax 和 javascript 技巧. 你可以用它們在你的下一次設計中達到一些視覺特效, 最棒的是, 這份名單裏面收集的都是一些新鮮的Ajax和Javascript技朽, 在學習技巧的同時, 你也可以掌握一些最新的科技資訊.
下面的這些示例分別使用了jQuery, Mootools, Prototype 和 script.aculo.us , 每個示例也都有相應的DEMO演示.在瀏覽它們之前, 你也可以回顧一下帕蘭之前發表的一些相關文章:
1) Growl 2.0 with Mootools- Daniel Mota使用 Mootools創建了Growl 2.0 , 讓我們可以輕鬆的集成我們的Web應用程序.
2) Easiest Tooltip and Image Preview Using jQuery- 一個令人難以置信的簡單的方法實現的提示效果,類似彈出氣泡, 當鼠標懸浮在鏈接上時, 可以彈出提示或縮略圖.
3) Sliding top panel using mootools- Antonio Lupetti向我們介紹如何使用mootools, 再通過幾行簡單的CSS和Javascript代碼來實現一個展開/閉合的滑動門效果.
- 下載該教程 點擊這裏
4) Sliding top panel using mootools- 滑動效果的頂部導欄 … 基於jQuery!
5) Create a Slick Tabbed Content Area using CSS & jQuery- 如何使用HTML建立一個簡單的Tab標籤內容框 ,然後使用一些簡單的JavaScript來實現滑動 特效. 基於jQuery
6) Custom JavaScript Dialog Boxes- 該腳本目前主要提供四種對話框風格: 警報,警告,提示和成功。
7) Facebook Sliders With Mootools and CSS - 一個很簡單的三滑塊系統,允許用戶通過滑桿來修改高度,寬度和透明度. 基於Mootools, 仿Facebook.
- Checkout the Live Demo
8 ) Making a Javascript Video Player- 如何創建一個純JavaScript 的視頻播放器.
- Checkout the Demos here.
9) Ajax mosaic builder- 一個Ajax效果的馬賽克圖片生成工具.
- Checkout the Demo here.
10) jQuery flipv()- 通過簡單的方式實現的垂直文本效果.
11) Drag. Drop. Lock.- 一個簡單的教程, 教你如何在PHP中創建出拖拽效果.
- Checkout the Live Demo
12) WebAppers Simple Javascript Progress Bar with CSS- 由 WebAppers 創建的一個醒目的進度條, 其靈感來源於 Bare Naked App
13) moowheel- 使用JavaScript和<canvas>對象,生成個性和優美的可視化數據顯示。
- Checkout the Live Demo
14) noobSlide-一個流暢的 Mootools 幻燈片圖像畫廊展示腳本.
- Checkout the Demo here.
15) Mocha UI- Mocha 一個基於Mootools javascript 框架創建的Web應用程序. Mocha GUI 的組件使用canvas標籤圖型構建而成.
- Checkout the Demo here.
16) ddMenu- ddMenu是一個簡單的基於MooTools的腳本, 用來創建你自己的文本導航菜單.
17) googleDrive- googleDrive是一個小小的google地圖mash up應用, 可以讓你在Google Maps上面駕駛一輛小小的汽車.
18) GlassBox- GlassBox是一個短小精悍的 Javascript 用戶UI庫, 結合 Prototype 和 Script.aculo.us 可以生成一些特效. 使用 GlassBox你可以創建透明邊框, 多彩佈局和類Flash的特效等等.
19) ProtoFlow- ProtoFlow是一個使用 Javascript腳本的封面循環展示特效. 它基於 Prototype, Scriptaculous 和 Reflection.js.使用
20) ASP.NET AJAX AutoComplete Control (Facebook look)- 一個基於 ASP.NET 語言的 AJAX 擴展, 可以附加任何文本框控制.
21) ADamnIT - JS error notification- 一個免費的JS報錯腳本, 當你的網頁出現 JS 錯誤的時候, 它會自動發送一封郵件向你報告.
22) Flexigrid- 一個輕量級但擁有豐富數據的網格腳本, 配合標題與欄目大小, 可以滾動數據,支持連接到一個基於XML的數據源, 支持使用AJAX加載內容。
23) prettyPhoto a jQuery lightbox clone- 一個 jQuery 的 類Lightbox燈箱效果的腳本, 可定製的功能比較豐富.
24) JavaScript Color Fading Script- 這個輕巧的JavaScript可以很容易的實現色彩過渡, 可以添加褪色效果到表格, DIV層以及更多元素. 並且你可以設置元素的背景,邊框或文字顏色.
25) Rotator
26) Kotatsu - a simple html table generator- 一個新鮮的工具, 幫助你快速的創建表格.
27) jQuery virtual tour- 這個虛擬導航插件的最大特殊性是, 即使Javascript沒有被激活, 同樣可以運行, 只是少了一些特效.
28) Usable directory listings with a little Dojo-爲目錄列表創建一個簡單的過濾瀏覽腳本.
29) Cuzillion’- 該工具可讓你測試出在瀏覽器中不同的技術性能, 再針對其進行優化,這些測試可以保存和共享到社交網站。
30) The Sliding date-picker- 一個滑動效果的日期拾取腳本.
英文原文:Exceptional Ajax/javascript Techniques (Recently Created)
翻譯:帕蘭映像