﻿<?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-java 记录-文章分类-jQuery</title><link>http://www.blogjava.net/hua020505110/category/48088.html</link><description>学习java</description><language>zh-cn</language><lastBuildDate>Sat, 19 Mar 2011 16:31:57 GMT</lastBuildDate><pubDate>Sat, 19 Mar 2011 16:31:57 GMT</pubDate><ttl>60</ttl><item><title>8个令人印象深刻的JavaScript效果的网站</title><link>http://www.blogjava.net/hua020505110/articles/346518.html</link><dc:creator>啊飞</dc:creator><author>啊飞</author><pubDate>Fri, 18 Mar 2011 03:04:00 GMT</pubDate><guid>http://www.blogjava.net/hua020505110/articles/346518.html</guid><wfw:comment>http://www.blogjava.net/hua020505110/comments/346518.html</wfw:comment><comments>http://www.blogjava.net/hua020505110/articles/346518.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hua020505110/comments/commentRss/346518.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hua020505110/services/trackbacks/346518.html</trackback:ping><description><![CDATA[<span  style="color: #404040; font-size: 14px; line-height: 25px; font-family: Verdana, Arial, Helvetica, sans-serif; ">
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">这篇文章很有意思，我发现了8个具有共同特征的站点-他们都使用JavaScript脚本语言。是什么使HTML/CSS站点很漂亮、过目难忘？我们需要JavaScript的魔力，使网站更具交互性和动画特征。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">下面我们就看看这8个站点。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.momentoapp.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Momento App</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103433175.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image001" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103436650.jpg" border="0" alt="clip_image001" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">Momento app是个丰富的iPhone应用站点。它有2个以上的不错的图片gallery组成，值得一看。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.wearefixel.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">We are fixel</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103438337.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image002" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103439529.jpg" border="0" alt="clip_image002" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">干净，漂亮的站点。口号吸引我们的眼球，你可以刷新显示不同的文字组合。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.factoria.it/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Factoria</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103441219.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image003" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103443571.jpg" border="0" alt="clip_image003" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">非常动画的一个站点，右侧位置的滑动效果不错。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.tompain.co.uk/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Tom Pain</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103445585.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image004" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103447684.jpg" border="0" alt="clip_image004" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">吸引人的内容幻灯，当页面加载时，好似一个Flash网站。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.pixillion.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Pixillion</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103449214.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image005" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103451420.jpg" border="0" alt="clip_image005" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">滚动条与jQuery Masonry的完美组合。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.moovents.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Moovents</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103452472.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image006" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103454716.jpg" border="0" alt="clip_image006" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">大规模的视差效果。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://www.allanyu.net/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Allan Yu</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103456494.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image007" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103501227.jpg" border="0" alt="clip_image007" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">第一眼，你会被布局所迷惑。慢慢你会发现一些有趣的...</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://gauged2.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">Gauged2</a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; "><a href="http://pic003.cnblogs.com/2011/34358/201103/20110318103504165.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; "><img title="clip_image008" src="http://pic003.cnblogs.com/2011/34358/201103/20110318103506120.jpg" border="0" alt="clip_image008" width="500" height="250" style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #494949; font-size: 14px; line-height: 1.5em; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; display: block; float: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">出色的滑动效果... parallax插件延迟滑动。</p>
<p style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; font-size: 14px; line-height: 25px; ">原文：<a href="http://www.queness.com/post/7133/8-websites-with-impressive-and-original-javascript-effects" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #005fa9; font-size: 14px; line-height: 1.5em; text-decoration: none; ">http://www.queness.com/post/7133/8-websites-with-impressive-and-original-javascript-effects</a></p>
</span>
<img src ="http://www.blogjava.net/hua020505110/aggbug/346518.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hua020505110/" target="_blank">啊飞</a> 2011-03-18 11:04 <a href="http://www.blogjava.net/hua020505110/articles/346518.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>