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，如需转载请自行联系原作者