﻿<?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-George Space-随笔分类-Web.Design.complex</title><link>http://www.blogjava.net/george-tech/category/44152.html</link><description>软件创造财富--[George_Space(at)126.com]</description><language>zh-cn</language><lastBuildDate>Tue, 27 Apr 2010 14:50:51 GMT</lastBuildDate><pubDate>Tue, 27 Apr 2010 14:50:51 GMT</pubDate><ttl>60</ttl><item><title>直逼 Flash 的流畅感：jQuery 运动特效展示</title><link>http://www.blogjava.net/george-tech/archive/2010/03/02/314263.html</link><dc:creator>George-tech</dc:creator><author>George-tech</author><pubDate>Tue, 02 Mar 2010 03:28:00 GMT</pubDate><guid>http://www.blogjava.net/george-tech/archive/2010/03/02/314263.html</guid><wfw:comment>http://www.blogjava.net/george-tech/comments/314263.html</wfw:comment><comments>http://www.blogjava.net/george-tech/archive/2010/03/02/314263.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/george-tech/comments/commentRss/314263.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/george-tech/services/trackbacks/314263.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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 0pt" alt="Fluid  Navigation &#8211; How to create an informative menu-bar with &#13;&#10;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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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>
<p><a href="http://razorjack.net/quicksand/demos/one-set-clone.html"><img style="border-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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-bottom: 0pt; border-left: 0pt; border-top: 0pt; border-right: 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>
转载自：http://blog.csdn.net/comsharp/archive/2010/03/02/5337530.aspx
<img src ="http://www.blogjava.net/george-tech/aggbug/314263.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/george-tech/" target="_blank">George-tech</a> 2010-03-02 11:28 <a href="http://www.blogjava.net/george-tech/archive/2010/03/02/314263.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>实现iFrame自适应高度</title><link>http://www.blogjava.net/george-tech/archive/2010/03/02/314259.html</link><dc:creator>George-tech</dc:creator><author>George-tech</author><pubDate>Tue, 02 Mar 2010 03:15:00 GMT</pubDate><guid>http://www.blogjava.net/george-tech/archive/2010/03/02/314259.html</guid><wfw:comment>http://www.blogjava.net/george-tech/comments/314259.html</wfw:comment><comments>http://www.blogjava.net/george-tech/archive/2010/03/02/314259.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/george-tech/comments/commentRss/314259.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/george-tech/services/trackbacks/314259.html</trackback:ping><description><![CDATA[<p><strong>&lt;iframe</strong> id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm" mce_src="index.htm"<strong>&gt;&lt;/iframe&gt;</strong></p><img src ="http://www.blogjava.net/george-tech/aggbug/314259.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/george-tech/" target="_blank">George-tech</a> 2010-03-02 11:15 <a href="http://www.blogjava.net/george-tech/archive/2010/03/02/314259.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>