<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>what is the RIA?  just it…&#124;&#124;咖啡兔菜单</title>
	<atom:link href="http://www.wsria.cn/archives/tag/%e8%8f%9c%e5%8d%95/feed" rel="self" type="application/rss+xml" />
	<link>http://www.wsria.cn</link>
	<description>我们要的就是RIA……Let&#039;s do it now.</description>
	<lastBuildDate>Tue, 24 Aug 2010 01:46:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>直逼 Flash 的流畅感：jQuery 运动特效展示</title>
		<link>http://www.wsria.cn/archives/918</link>
		<comments>http://www.wsria.cn/archives/918#comments</comments>
		<pubDate>Tue, 02 Mar 2010 06:41:46 +0000</pubDate>
		<dc:creator>咖啡兔</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[菜单]]></category>

		<guid isPermaLink="false">http://www.wsria.cn/?p=918</guid>
		<description><![CDATA[新闻来源:devsnippets.com 围剿 Flash 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 jQuery 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 Flash。本文介绍了10个非常出色的 jQuery 运动特效，这些效果可以更有效地展示你的内容。 让Flash喝西北风去吧，走，看看jQuery多牛X…… 1. 流感导航菜单 下面的导航菜单，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。 2. 转花灯 Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。 3. 拉洋片 拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。 4. jQuery Quicksand 插件 这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。 5. 导航滑块 这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。 6. 文字的移动纹理 在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。 [...]]]></description>
			<content:encoded><![CDATA[<p>新闻来源:devsnippets.com<br />
围剿 <span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/flash" title="查看 Flash 中所有日志" target="_blank">Flash</a></span> 的不仅有 HTML 5，还有 JavaScript，著名的 JavaScript 框架 <span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/jquery" title="查看 jQuery 中所有日志" target="_blank">jQuery</a></span> 在运动特效方面已经越来越流畅，有时候你需要点一下右键来确认它不是 <span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/flash" title="查看 Flash 中所有日志" target="_blank">Flash</a></span>。本文介绍了10个非常出色的 <span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/jquery" title="查看 jQuery 中所有日志" target="_blank">jQuery</a></span> 运动特效，这些效果可以更有效地展示你的内容。</p>
<p>让<span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/flash" title="查看 Flash 中所有日志" target="_blank">Flash</a></span>喝西北风去吧，走，看看<span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/jquery" title="查看 jQuery 中所有日志" target="_blank">jQuery</a></span>多牛X……</p>
<p><span id="more-918"></span></p>
<p><strong>1. 流感导航<span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/%e8%8f%9c%e5%8d%95" title="查看 菜单 中所有日志" target="_blank">菜单</a></span></strong><br />
下面的导航<span class='wp_keywordlink_affiliate'><a href="http://www.wsria.cn/archives/tag/%e8%8f%9c%e5%8d%95" title="查看 菜单 中所有日志" target="_blank">菜单</a></span>，当鼠标在上面移动的时候，会很流畅地垂下解释菜单，当你将鼠标在上面快速左右移动的时候，会怀疑这是 Flash。</p>
<p><a href="http://addyosmani.com/resources/fluid-menu/fluid-menu.html"><img src="http://devsnippets.com/img/jquery-magic/jquery-01.jpg" alt="Fluid  Navigation – How to create an informative menu-bar with jQuery &amp;amp;amp;  CSS" /></a><br />
<strong>2. 转花灯</strong><br />
Roundabout 是一个 jQuery 插件，可以将一组 HTML 对象转换为旋转花灯的效果。</p>
<p><a href="http://fredhq.com/projects/roundabout/#demo"><img src="http://devsnippets.com/img/jquery-magic/jquery-02.jpg" alt="Move  Elements with Style" /></a></p>
<p><strong>3. 拉洋片</strong><br />
拉洋片也许是 jQuery 最拿手的效果了。该效果在遇到 JavaScript 被禁用的场合会自动降级使用。</p>
<p><a href="http://www.sohtanaka.com/web-design/examples/image-slider/"><img src="http://devsnippets.com/img/jquery-magic/jquery-03.jpg" alt="Automatic Image Slider w/ CSS &amp;amp;amp; jQuery" /></a><br />
<strong>4. jQuery Quicksand 插件</strong><br />
这个让人赞叹的插件，可以对一组 HTML 对象重新洗牌，效果非常出众。</p>
<p><a href="http://razorjack.net/quicksand/demos/one-set-clone.html"><img src="http://devsnippets.com/img/jquery-magic/jquery-04.jpg" alt="jQuery  Quicksand Plugin" /></a><br />
<strong>5. 导航滑块</strong><br />
这种风格的导航已经见于很多站点，鼠标在导航菜单上移动的时候，一个高亮指示条随着鼠标滑动，指示当前的导航位置。</p>
<p><a href="http://css-tricks.com/examples/MagicLine/"><img src="http://devsnippets.com/img/jquery-magic/jquery-05.jpg" alt="jQuery  Magic Line Sliding Style Navigation" /></a><br />
<strong>6. 文字的移动纹理</strong><br />
在文字上，显示移动的纹理，效果美轮美奂。原理是，做一个带透明文字的 PNG 图像放在一个容器里，容器的背景放一张图案，用 jQuery 移动容器的背景，很简单，不过，不支持 IE6，因为 IE6 不支持 PNG。</p>
<p><a href="http://www.gayadesign.com/scripts/textmovingbg/"><img src="http://devsnippets.com/img/jquery-magic/jquery-06.jpg" alt="Text  with Moving Backgrounds" /></a><br />
<strong>7. jDiv: jQuery 导航 Tab</strong><br />
一个可以显示丰富内容的下拉导航菜单（演示要翻墙）。</p>
<p><a href="http://www.skyrocketlabs.com/categories/tutorials/jdiv/demo/index.html"><img src="http://devsnippets.com/img/jquery-magic/jquery-07.jpg" alt="jDiv: A  jQuery navigation menu alternative" /></a><br />
<strong>8. 基于 CSS3 和 jQuery 的半透明导航系统</strong><br />
鼠标在导航菜单上移动，显示半透明的指示图标。CSS3 做这个实在太容易了。</p>
<p><a href="http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html"><img src="http://devsnippets.com/img/jquery-magic/jquery-08.jpg" alt="Halftone Navigation Menu With jQuery &amp;amp;amp; CSS3" /></a><br />
<strong>9. 云台式拉洋片</strong><br />
常规的拉洋片效果要么左到右，要么右到左，或者垂直上下，这个 jQuery 效果可以象云台那样扫镜头。</p>
<p><a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm"><img src="http://devsnippets.com/img/jquery-magic/jquery-09.jpg" alt="Animate Panning Slideshow with jQuery" /></a><br />
<strong>10. SlideDeck</strong><br />
SlideDeck 是一种新颖的内容展示方式，有点类似 Outlook 的手风琴菜单，但视觉效果和用户体验更好一些。</p>
<p><a href="http://www.slidedeck.com/"><img src="http://devsnippets.com/img/jquery-magic/jquery-10.jpg" alt="SlideDeck" /></a></p>
<p>本文来源：<a href="http://devsnippets.com/article/10-jquery-transition-effects.html">http://devsnippets.com/article/10-jquery-transition-effects.html</a><br />
中文编译来源：<a href="http://www.comsharp.com/"><strong>锐商企业CMS</strong> 网站内容管理系统</a> 官方网站
<p class="copyright_info"><strong class="icon">声明:</strong>该日志由<a title="由 咖啡兔 发表" href="http://www.wsria.cn/archives/author/admin/" linkindex="13">咖啡兔</a>发表,你可以自由发表评论或转载到你的网站或博客。 <br/><span style="padding-left:20px">转载请注明转自<a rel="bookmark inlinks" href="http://www.wsria.cn/wordpress/" title="what is the RIA?  just it…||咖啡兔" linkindex="14"> what is the RIA?  just it…||咖啡兔 &trade;</a></span><br />
<strong class="icon">原始链接:</strong><a href="http://www.wsria.cn/archives/918">http://www.wsria.cn/archives/918 | 直逼 Flash 的流畅感：jQuery 运动特效展示</a>
</p>
<h3>相关文章</h3>
<ul class="related_posts">
<li><a href="http://www.wsria.cn/archives/611" title="站点GBK编码下jQuery Ajax中文乱码解决方案" rel="bookmark inlinks">站点GBK编码下jQuery Ajax中文乱码解决方案</a><span class="count">( 22 )</span></li>
<li><a href="http://www.wsria.cn/archives/429" title="jQuery.plugin——强大的遮罩层(nyroModal)" rel="bookmark inlinks">jQuery.plugin——强大的遮罩层(nyroModal)</a><span class="count">( 2 )</span></li>
<li><a href="http://www.wsria.cn/archives/733" title="推荐：2009 年度最佳 jQuery 插件" rel="bookmark inlinks">推荐：2009 年度最佳 jQuery 插件</a><span class="count">( 2 )</span></li>
<li><a href="http://www.wsria.cn/archives/974" title="[转][推荐]15 个 JavaScript Web UI 库" rel="bookmark inlinks">[转][推荐]15 个 JavaScript Web UI 库</a><span class="count">( 0 )</span></li>
<li><a href="http://www.wsria.cn/archives/471" title="一行jQuery代码打印九九乘法表" rel="bookmark inlinks">一行jQuery代码打印九九乘法表</a><span class="count">( 2 )</span></li>
<li><a href="http://www.wsria.cn/archives/324" title="jQuery.plugin——滚动条(连贯感觉)" rel="bookmark inlinks">jQuery.plugin——滚动条(连贯感觉)</a><span class="count">( 0 )</span></li>
<li><a href="http://www.wsria.cn/archives/214" title="推荐jQuery插件系列——表单验证formValidator" rel="bookmark inlinks">推荐jQuery插件系列——表单验证formValidator</a><span class="count">( 2 )</span></li>
<li><a href="http://www.wsria.cn/archives/582" title="如何判断一个请求是否为AJAX请求" rel="bookmark inlinks">如何判断一个请求是否为AJAX请求</a><span class="count">( 2 )</span></li>
</ul>
<p>&copy;2010 <a href="http://www.wsria.cn">what is the RIA?  just it…||咖啡兔</a>. All Rights Reserved.</p>.<img src="http://www.wsria.cn/wordpress/?ak_action=api_record_view&id=918&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.wsria.cn/archives/918/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
