13個絢麗的Jquery 界面設計

今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動态切換視圖的相冊、3D旋轉分享按鈕、Facebook admin Panel，下滑效果的導航Menu，滑翔購物車功能，漂亮的Form表單元素等等。

<a href="http://swizec.com/code/styledButton/" target="_blank">How to create the image-less from Google.com</a>

無圖檔、完全通過CSS控制的一些表單元素。據說Google專門招募了一些設計高手專門研究一些此項技術。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image.png" target="_blank"></a>

<a href="http://designm.ag/tutorials/jquery-display-switch/" target="_blank">How to Create an Image Gallery with easily Switchable Views</a>

此相冊具有兩種視圖：文字并茂和純圖檔效果，這兩種效果可以靈活第進行切換。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image1.png" target="_blank"></a>

<a href="http://tutorialzine.com/2009/12/animated-share-buttons-jquery-css/" target="_blank">An Animated Sharing-Bar that includes a 3D Carousel Effect</a>

3D旋轉效果展示分享按鈕，具有動畫效果。WordPress的tab雲好像也有這種效果。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image2.png" target="_blank"></a>

<a href="http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/" target="_blank">Facebook Style Footer Admin Panel with CSS and jQuery</a>

類似Facebook的底部管理面闆，把一些常用的管理按鈕放到網站的底部。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/01_finalDemo.gif" target="_blank"></a>

<a href="http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/" target="_blank">How to use the Sliding-Doors Technique to create buttons using Sprites</a>

減輕伺服器負擔的Sprite技術

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image3.png" target="_blank"></a>

<a href="http://www.geektantra.com/2009/09/jquery-mega-menu/" target="_blank">jQuery Mega-Menu with slide-down effects</a>

一個富導航按鈕，能夠展示更寬廣和大氣的導航。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image4.png" target="_blank"></a>

<a href="http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/" target="_blank">jQuery Fly-To-Basket Effect for Online Stores</a>

點選【Add to Basket】按鈕,商品滑動到右側的購物車，非常Cool。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image5.png" target="_blank"></a>

<a href="http://demo.tutorialzine.com/2009/11/fancy-quotes/demo.php" target="_blank">Fancy Quotes using jQuery, CSS and Ajax</a>

滑鼠放到右側的概要List時，右側List自動滾動，滑鼠點選後，左側展示詳細内容。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image6.png" target="_blank"></a>

<a href="http://www.givainc.com/labs/ibutton_example.htm" target="_blank">GivaLabs iButtons – a different way of displaying your checkbox</a>

具有動畫效果的CheckBox

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image7.png" target="_blank"></a>

<a href="http://trentrichardson.com/Impromptu/index.php" target="_blank">jQuery Impromptu – A Sleek, light-weight and simple way to add user-prompts</a>

光滑、輕量級的使用者提示框。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image8.png" target="_blank"></a>

<a href="http://www.emblematiq.com/lab/niceforms/demo/" target="_blank">NiceForms – Easy Form Skinning for the masses</a>

非常漂亮的表單元素皮膚，可以美化checkbox, select and input field 等元素。

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image9.png" target="_blank"></a>

<a href="http://design-notes.info/tutorial/jquery-tutorial/make-fancy-light-up-rss-button-with-jquery-fading/" target="_blank">A Very Simple Change to your Layout – Fade in and Fade-out effects for main page icons</a>

頁面Icon圖示的淡入和淡出效果

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image10.png" target="_blank"></a>

<a href="http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.html" target="_blank">A Colorful Accordion with Bounce Effects</a>

具有顔色的手風琴效果

<a href="http://addyosmani.com/blog/wp-content/uploads/2010/01/image11.png" target="_blank"></a>

本文轉自 靈動生活 51CTO部落格，原文連結：http://blog.51cto.com/smartlife/284124，如需轉載請自行聯系原作者