<?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>焦秋野 &#124; 关注网站设计,前端资讯,用户体验,SEO,网站设计 &#187; jQuery</title>
	<atom:link href="http://www.imjqy.com/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://www.imjqy.com</link>
	<description></description>
	<lastBuildDate>Wed, 01 Feb 2012 00:17:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>21个展示jQuery特效</title>
		<link>http://www.imjqy.com/javascript/21_jquery</link>
		<comments>http://www.imjqy.com/javascript/21_jquery#comments</comments>
		<pubDate>Mon, 26 Jul 2010 00:28:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.imjqy.com/?p=532</guid>
		<description><![CDATA[就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一！自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash，比如 jQuery, Ajax 还有其它。 尽管在很多情况下Flash在仍然是一个非常强大和有用的工具,web设计师习惯于用flash完成一些特效，但这些都能用jQuery轻松实现！下面有21 个在线的演示来显示jQuery在制作高级特效和交互方面的强大能力，可以媲美Flash！ 1. Flip! 一个 jQuery 插件 这个演示 模仿流行的卡片翻转的效果，可以360度旋转自身，x或y维度！ 2. jQuery Quicksand 插件 这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！ 3. ImageFlow 这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！ 4. 用jQuery代替flash建立一个交互性地图 这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！ 5. 用jQuery &#38; CSS3滑出消息 点击+号用漂亮的光滑的动画效果展示附加的信息！ 6. Zoomer Gallery 在这个演示中看起来静态的画廊被multi-layer &#8230; <a href="http://www.imjqy.com/javascript/21_jquery">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一！自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash，比如 jQuery, Ajax 还有其它。<br />
尽管在很多情况下Flash在仍然是一个非常强大和有用的工具,web设计师习惯于用flash完成一些特效，但这些都能用jQuery轻松实现！下面有21 个在线的演示来显示jQuery在制作高级特效和交互方面的强大能力，可以媲美Flash！</p>
<p><span id="more-532"></span></p>
<p><strong>1. Flip! 一个 jQuery 插件</strong></p>
<p>这个演示 模仿流行的卡片翻转的效果，可以360度旋转自身，x或y维度！</p>
<p><a href="http://lab.smashup.it/flip/"><img class="alignnone size-full wp-image-70" style="display: inline;" title="image (1)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-11.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>2. jQuery Quicksand 插件</strong></p>
<p>这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！</p>
<p><a href="http://razorjack.net/quicksand/"><img class="alignnone size-full wp-image-71" style="display: inline;" title="image (2)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-2.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>3. ImageFlow</strong></p>
<p>这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！</p>
<p><a href="http://imageflow.finnrudolph.de/"><img class="alignnone size-full wp-image-72" style="display: inline;" title="image (3)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-3.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>4. 用jQuery代替flash建立一个交互性地图</strong></p>
<p>这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！</p>
<p><a href="http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps"><img class="alignnone size-full wp-image-73" style="display: inline;" title="image (4)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-4.jpg" alt="" width="500" height="398" /></a></p>
<p><strong>5. 用jQuery &amp; CSS3滑出消息</strong></p>
<p>点击+号用漂亮的光滑的动画效果展示附加的信息！</p>
<p><a href="http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html"><img class="alignnone size-full wp-image-74" style="display: inline;" title="image (5)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-5.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>6. Zoomer Gallery</strong></p>
<p>在这个演示中看起来静态的画廊被multi-layer zoom特效变得富有交互性，当移到图像上时会产生缩放！</p>
<p><a href="http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/"><img class="alignnone size-full wp-image-75" style="display: inline;" title="image (6)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-6.jpg" alt="" width="500" height="405" /></a></p>
<p><strong>7. jQuery Circulate</strong></p>
<p>这个演示展示了滚球的粒子效果，所有的特效都是用jQuery</p>
<p><a href="http://css-tricks.com/examples/Circulate/"><img class="alignnone size-full wp-image-76" style="display: inline;" title="image (7)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-7.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>8. Photo Zoom Out Effect</strong></p>
<p>这个也是一个图像伸缩的特效，看起来静止的画面，会随着你的鼠标移过而变得富有生机！</p>
<p><a href="http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/"><img class="alignnone size-full wp-image-77" style="display: inline;" title="image (8)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-8.jpg" alt="" width="500" height="405" /></a></p>
<p><strong>9. Sliding Boxes and Captions with jQuery</strong></p>
<p>这里我们可以看到原本只能被flash开发者创造的过渡特效，现在使用jQuery一样可以办到！</p>
<p><a href="http://fenxiang.me/wp-content/uploads/2010/07/image-9.jpg"><img class="alignnone size-full wp-image-78" style="display: inline;" title="image (9)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-9.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>10. CSS3 Lightbox Gallery</strong></p>
<p>这个插件看起来是为媒体展示图片特别制作的，你可以任意拖拽图片达到图片拼接的效果，你还可以单击放大图片！这是一个强大的图片展示特效！你还可以 用API使用ajax技术让人们分享图片到Flickr，twitter，Facebook或者其他网站！当然中国的新浪微博、人人网、开心网也能！</p>
<p><a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php"><img class="alignnone size-full wp-image-79" style="display: inline;" title="image (10)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-10.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>11. 用jQuery和CSS3创造一个拍照效果！</strong></p>
<p>一眼看去这个演示像游戏狙击，乍一看居然是拍照功能！这是一个很强大的工具，当用AJAX或者HTML5本地存储时，用来对付特别大的图像！</p>
<p><a href="http://fenxiang.me/wp-content/uploads/2010/07/image-111.jpg"><img class="alignnone size-full wp-image-80" style="display: inline;" title="image (11)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-111.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>12. Awesome Bubble Navigation-可怕的泡沫导航效果</strong></p>
<p>开发者用色彩变换和动画创造出一个非常吸引人的并且富有交互性的菜单！</p>
<p><a href="http://tympanus.net/Tutorials/BubbleNavigation/"><img class="alignnone size-full wp-image-81" style="display: inline;" title="image (12)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-12.jpg" alt="" width="500" height="404" /></a></p>
<p><strong>13. Beautiful Background Image Navigation</strong></p>
<p>酷炫的图片展示特效，用来做导航会有惊人的效果！</p>
<p><a href="http://fenxiang.me/wp-content/uploads/2010/07/image-13.jpg"><img class="alignnone size-full wp-image-82" style="display: inline;" title="image (13)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-13.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>14. AviaSlider</strong></p>
<p>AviaSlider采用经典的类似Flash的过渡效果，以强化滑块界面。</p>
<p><a href="http://fenxiang.me/wp-content/uploads/2010/07/image-14.jpg"><img class="alignnone size-full wp-image-83" style="display: inline;" title="image (14)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-14.jpg" alt="" width="500" height="402" /></a></p>
<p><strong>15. Background Image Slideshow</strong></p>
<p>动画背景的地方flash用来支配的网页设计之一。这里有一个例子使用jQuery代替。</p>
<p><a href="http://demo.marcofolio.net/bgimg_slideshow/"><img class="alignnone size-full wp-image-84" style="display: inline;" title="image (15)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-15.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>16. Panning Slideshow</strong></p>
<p>另一个独特采取典型幻灯片界面。在这里，笔者增加了对角线导航的接口，并使其脱颖而出。</p>
<p><a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm"><img class="alignnone size-full wp-image-85" style="display: inline;" title="image (16)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-16.jpg" alt="" width="500" height="400" /></a></p>
<p><strong>17. jqFancyTransitions</strong></p>
<p>这个插件可以用来显示作为一个具有奇特法拉盛般的幻灯片过渡效果的照片。</p>
<p><a href="http://workshop.rs/projects/jqfancytransitions/"><img class="alignnone size-full wp-image-86" style="display: inline;" title="image (17)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-17.jpg" alt="" width="500" height="405" /></a></p>
<p><strong>18. iCarousel – Horizontal images slider</strong></p>
<p>另一个幻灯片，添加了缓和的过渡和真的挺身而出。这也难怪他们选择在此演示，展示性感的Mac产品。</p>
<p><a href="http://zendold.lojcomm.com.br/icarousel/example6.asp"><img class="alignnone size-full wp-image-87" style="display: inline;" title="image (18)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-18.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>19. Making an Interactive Picture with jQuery</strong></p>
<p>该演示可用于拍摄的网站那里有很多优势的屏幕空间。该网站上发现的第一个模式框点击它显示更多关于点击部分的信息。</p>
<p><a href="http://static.buildinternet.com/live-tutorials/interactive-picture/index.html"><img class="alignnone size-full wp-image-88" style="display: inline;" title="image (19)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-19.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>20. Cloud Zoom</strong></p>
<p>一个插件，看起来好像是在考虑电子商务设计。云缩放易于实现，能真正提高用户的体验。</p>
<p><a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm"><img class="alignnone size-full wp-image-89" style="display: inline;" title="image (20)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-20.jpg" alt="" width="500" height="406" /></a></p>
<p><strong>21. Apple-like Retina Effect</strong></p>
<p>任何人谁使用了一iPhone，iPod的触摸，或ipad，将扩大在屏幕上时，你碰了长时间的面积小面积熟悉。此演示实现这个桌面效果。</p>
<p><a href="http://fenxiang.me/wp-content/uploads/2010/07/image-21.jpg"><img class="alignnone size-full wp-image-90" style="display: inline;" title="image (21)" src="http://fenxiang.me/wp-content/uploads/2010/07/image-21.jpg" alt="" width="500" height="406" /></a></p>
<p><em>专为WDD编译 <a href="http://www.designtopx.com/" target="_blank">Kalim舰队,</a> 。他是一个专业网站设计者和博客与超过6年的经验。这个网站是他的激情,他自己的时间写博客的分裂,软件的发展和社会的媒体。他喜欢使用和开发新的应用网络、移动、桌面。</em><br />
原文：<a href="http://www.webdesignerdepot.com/2010/07/20-demos-showing-advanced-jquery-effects/">http://www.webdesignerdepot.com/2010/07/20-demos-showing-advanced-jquery-effects/</a><br />
翻译：<a href="http://fenxiang.me/reproduced-and-translation/20-demos-showing-advanced-jquery-effects.html">http://fenxiang.me/reproduced-and-translation/20-demos-showing-advanced-jquery-effects.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.imjqy.com/javascript/21_jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

