﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-小菜毛毛技术分享-随笔分类-jQuery</title><link>http://www.blogjava.net/caizh2009/category/44173.html</link><description>与大家共同成长</description><language>zh-cn</language><lastBuildDate>Wed, 03 Mar 2010 01:15:24 GMT</lastBuildDate><pubDate>Wed, 03 Mar 2010 01:15:24 GMT</pubDate><ttl>60</ttl><item><title>jQuery 运动特效展示</title><link>http://www.blogjava.net/caizh2009/archive/2010/03/03/314345.html</link><dc:creator>小菜毛毛</dc:creator><author>小菜毛毛</author><pubDate>Wed, 03 Mar 2010 01:11:00 GMT</pubDate><guid>http://www.blogjava.net/caizh2009/archive/2010/03/03/314345.html</guid><wfw:comment>http://www.blogjava.net/caizh2009/comments/314345.html</wfw:comment><comments>http://www.blogjava.net/caizh2009/archive/2010/03/03/314345.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/caizh2009/comments/commentRss/314345.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/caizh2009/services/trackbacks/314345.html</trackback:ping><description><![CDATA[<p>围剿 Flash 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效，这些效果可以更有效地展示你的内容。</p>
<h3 class="subtitle">1. 流感导航菜单</h3>
<p>下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。</p>
<p><a href="http://addyosmani.com/resources/fluid-menu/fluid-menu.html"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Fluid  Navigation &#8211; How to create an informative menu-bar with jQuery &amp;  CSS" src="http://devsnippets.com/img/jquery-magic/jquery-01.jpg" /></a></p>
<h3 class="subtitle">2. 转花灯</h3>
<p>Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。</p>
<p><a href="http://fredhq.com/projects/roundabout/#demo"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Move  Elements with Style" src="http://devsnippets.com/img/jquery-magic/jquery-02.jpg" /></a></p>
<h3 class="subtitle">3. 拉洋片</h3>
<p>拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。</p>
<p><a href="http://www.sohtanaka.com/web-design/examples/image-slider/"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Automatic Image Slider w/ CSS &amp; jQuery" src="http://devsnippets.com/img/jquery-magic/jquery-03.jpg" /></a></p>
<h3 class="subtitle">4. jQuery Quicksand 插件</h3>
<p>这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。</p>
<ul></ul>
    <p><a href="http://razorjack.net/quicksand/demos/one-set-clone.html"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="jQuery  Quicksand Plugin" src="http://devsnippets.com/img/jquery-magic/jquery-04.jpg" /></a></p>
    <h3 class="subtitle">5. 导航滑块</h3>
    <p>这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。</p>
    <p><a href="http://css-tricks.com/examples/MagicLine/"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="jQuery  Magic Line Sliding Style Navigation" src="http://devsnippets.com/img/jquery-magic/jquery-05.jpg" /></a></p>
    <h3 class="subtitle">6. 文字的移动纹理</h3>
    <p>在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。</p>
    <p><a href="http://www.gayadesign.com/scripts/textmovingbg/"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Text  with Moving Backgrounds" src="http://devsnippets.com/img/jquery-magic/jquery-06.jpg" /></a></p>
    <h3 class="subtitle">7. jDiv: jQuery 导航 Tab</h3>
    <p>一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。</p>
    <p><a href="http://www.skyrocketlabs.com/categories/tutorials/jdiv/demo/index.html"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="jDiv: A  jQuery navigation menu alternative" src="http://devsnippets.com/img/jquery-magic/jquery-07.jpg" /></a></p>
    <h3 class="subtitle">8. 基于 CSS3 和 jQuery 的半透明导航系统</h3>
    <p>鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。</p>
    <p><a href="http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Halftone Navigation Menu With jQuery &amp; CSS3" src="http://devsnippets.com/img/jquery-magic/jquery-08.jpg" /></a></p>
    <h3 class="subtitle">9. 云台式拉洋片</h3>
    <p>常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。</p>
    <p><a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Animate Panning Slideshow with jQuery" src="http://devsnippets.com/img/jquery-magic/jquery-09.jpg" /></a></p>
    <h3 class="subtitle">10. SlideDeck</h3>
    <p>SlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。</p>
    <p><a href="http://www.slidedeck.com/"><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="SlideDeck" src="http://devsnippets.com/img/jquery-magic/jquery-10.jpg" /></a></p>
    <p>本文来源：<a href="http://devsnippets.com/article/10-jquery-transition-effects.html">http://devsnippets.com/article/10-jquery-transition-effects.html</a></p>
    <p>&nbsp;</p>
<img src ="http://www.blogjava.net/caizh2009/aggbug/314345.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/caizh2009/" target="_blank">小菜毛毛</a> 2010-03-03 09:11 <a href="http://www.blogjava.net/caizh2009/archive/2010/03/03/314345.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>