30個精挑細緻的Ajax和Javascript 技巧

 

在這篇文章裏面, 我們列出了30個精挑細緻的Ajax 和 javascript 技巧. 你可以用它們在你的下一次設計中達到一些視覺特效, 最棒的是, 這份名單裏面收集的都是一些新鮮的Ajax和Javascript技朽, 在學習技巧的同時, 你也可以掌握一些最新的科技資訊.

下面的這些示例分別使用了jQuery, Mootools, Prototypescript.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.

 


8 ) Making a Javascript Video Player- 如何創建一個純JavaScript 的視頻播放器.

 


9) Ajax mosaic builder- 一個Ajax效果的馬賽克圖片生成工具.

 


10) jQuery flipv()- 通過簡單的方式實現的垂直文本效果.

 


11) Drag. Drop. Lock.- 一個簡單的教程, 教你如何在PHP中創建出拖拽效果.

 


12) WebAppers Simple Javascript Progress Bar with CSS- 由 WebAppers 創建的一個醒目的進度條, 其靈感來源於 Bare Naked App

 


13) moowheel- 使用JavaScript和<canvas>對象,生成個性和優美的可視化數據顯示。

 


14) noobSlide-一個流暢的 Mootools 幻燈片圖像畫廊展示腳本.

 


15) Mocha UI- Mocha 一個基於Mootools javascript 框架創建的Web應用程序. Mocha GUI 的組件使用canvas標籤圖型構建而成.

 


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, ScriptaculousReflection.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-爲目錄列表創建一個簡單的過濾瀏覽腳本.

 

  • Checkout the Demo here.
  • 下載 a zip of the header and .htaccess files here.

29) Cuzillion’- 該工具可讓你測試出在瀏覽器中不同的技術性能, 再針對其進行優化,這些測試可以保存和共享到社交網站。

 


30) The Sliding date-picker- 一個滑動效果的日期拾取腳本.

 

英文原文:Exceptional Ajax/javascript Techniques (Recently Created)
翻譯:帕蘭映像

你可能還會感興趣的文章...
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章