10 个 jQuery 动态效果

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.


1. Fluid Navigation – How to create an informative menu-bar with jQuery & CSS

Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.

 

Fluid  Navigation – How to create an informative menu-bar with jQuery &  CSS

摘自 http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/

Demo: http://addyosmani.com/resources/fluid-menu/fluid-menu.html

Download: http://addyosmani.com/resources/fluid-menu/fluid-menu.zip


2. Move Elements with Style

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

 

Move  Elements with Style

 

 

Demo: http://fredhq.com/projects/roundabout/#demo

Download: http://fredhq.com/projects/roundabout/#demo


3. Automatic Image Slider w/ CSS & jQuery

A simple image slider using HTML/CSS/Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

 

Automatic Image Slider w/ CSS & jQuery

 

 

Demo: http://www.sohtanaka.com/web-design/examples/image-slider/

Download: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/


4. jQuery Quicksand Plugin

With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

  • 1. Use plain HTML, like an unordered list.
  • 2. Download data by an Ajax call
  • 3. Transform HTML items by JavaScript (for example, sort them differently)

jQuery  Quicksand Plugin

 

 

Demo: http://razorjack.net/quicksand/demos/one-set-clone.html

Download: http://razorjack.net/quicksand/


5. jQuery Magic Line Sliding Style Navigation

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

 

jQuery  Magic Line Sliding Style Navigation

 

Demo: http://css-tricks.com/examples/MagicLine/

Download: http://css-tricks.com/jquery-magicline-navigation/


6. Text with Moving Backgrounds

The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

 

Text  with Moving Backgrounds

 

Demo: http://www.gayadesign.com/scripts/textmovingbg/

Download: http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/


7. jDiv: A jQuery navigation menu alternative

A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:

  • More flexibility in design that your usual UL style;
  • The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy’s layout;
  • As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.

jDiv: A  jQuery navigation menu alternative

 

Demo: http://www.skyrocketlabs.com/categories/tutorials/jdiv/demo/index.html

Download: http://www.skyrocketlabs.com/articles/jdiv-a-jquery-navigation-menu-alternative.php


8. Halftone Navigation Menu With jQuery & CSS3

A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

 

Halftone Navigation Menu With jQuery & CSS3

 

Demo: http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html#

Download: http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/


9. Animate Panning Slideshow with jQuery

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we’ll have a slideshow that transitions by changing the visible window.

 

Animate Panning Slideshow with jQuery

 

Demo: http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm

Download: http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/


10. SlideDeck

SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

 

SlideDeck


Demo: http://www.slidedeck.com/

Download: http://www.slidedeck.com/



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值