Fri, 13 May 2011 17:20:52 GMT关于设计 css jquery js wordpress bloghttp://www.gooosen.comhourly1enFri, 13 May 2011 17:20:52 GMThttp://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408719/6366720/1/item.html<p>基于AJAX的自动完成填写的Jquery插件可以让你轻松的创建出一个带有提示功能的可自动完成的文件框。</p> <p>通测试IE 7+, FF 2+, Safari 3+, Opera 9+，chrome上都能很好的运行。</p> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/05/auto-complete-jquery.jpg"><img class="aligncenter size-full wp-image-1164" title="auto-complete-jquery" src="http://www.gooosen.com/wp-content/uploads/2011/05/auto-complete-jquery.jpg" alt="" width="480" height="201" /></a></p> <p style="text-align: left; padding-left: 60px;">要求:jQuery Framework</p> <p style="text-align: left; padding-left: 60px;">Demo:<a title="demo" rel="nofollow" href="http://www.devbridge.com/projects/autocomplete/jquery/" target="_blank">http://www.devbridge.com/projects/autocomplete/jquery/</a><a href="http://jackrugile.com/jrumble/" target="_blank"></a></p><img src="http://www1.feedsky.com/t1/511408719/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408719/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=11620基于AJAX的自动完成填写的Jquery插件可以让你轻松的创建出一个带有提示功能的可自动完成的文件框。<img src="http://www1.feedsky.com/t1/511408719/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408719/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />jqueryJavaScript设计Sat, 14 May 2011 01:20:52 +0800gooosenhttp://www.gooosen.com/?p=1162#commentshttp://www.gooosen.com/?p=1162gooosenhttp://www.gooosen.com/?p=1162http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408719/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408720/6366720/1/item.html<p style="text-align: justify;"><a href="http://jackrugile.com/jrumble/" target="_blank">jRumble</a>是一个可以让你选择的元素颤动，摇摆，旋转的JQuery插件。它可以让你很轻松的作出悬停效果或者那些想让人关注的地方，而且效果真是很不错。提供了颤动的X,Y还有旋转的范围，速度还有事件触发等多个参数。</p> <p style="text-align: justify;">然而jRumble在IE上还有一点小小的buggy！不过最主要的是，它现在是免费的！</p> <p style="text-align: justify;"><a href="http://www.gooosen.com/wp-content/uploads/2011/04/jrumble.jpg"><img class="aligncenter size-full wp-image-1159" title="jrumble" src="http://www.gooosen.com/wp-content/uploads/2011/04/jrumble.jpg" alt="" width="479" height="218" /></a></p> <p style="padding-left: 120px;">要求:jQuery Framework</p> <p style="padding-left: 120px;">Demo:<a href="http://jackrugile.com/jrumble/" target="_blank">http://jackrugile.com/jrumble/</a></p><img src="http://www1.feedsky.com/t1/511408720/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408720/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=11582jRumble是一个可以让你选择的元素颤动，摇摆，旋转的JQuery插件。它可以让你很轻松的作出悬停效果或者那些想让人关注的地方，而且效果真是很不错。提供了颤动的X,Y还有旋转的范围，速度还有事件触发等多个参数。<img src="http://www1.feedsky.com/t1/511408720/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408720/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Thu, 07 Apr 2011 23:24:27 +0800gooosenhttp://www.gooosen.com/?p=1158#commentshttp://www.gooosen.com/?p=1158gooosenhttp://www.gooosen.com/?p=1158http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408720/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408721/6366720/1/item.html<p>在网站中使用视差效果可以为你的网站营造出一种富有立体感的设计，让你的访问者感到更为有趣。这里找出几个不错的例子，让你了解一下使用视差效果带给我的神奇。</p> <h2><a href="http://taille-de-velo.btwin.com/" target="_blank">b’Twin</a></h2> <p style="text-align: center;"><a rel="http://taille-de-velo.btwin.com/btwin-live/jsp/liveContainer.jsp" href="http://taille-de-velo.btwin.com/btwin-live/jsp/liveContainer.jsp" target="_blank"><img class="aligncenter size-full wp-image-1133" title="btwin" src="http://www.gooosen.com/wp-content/uploads/2011/03/btwin1.jpg" alt="" width="580" height="388" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/fillstudio1.jpg"></a></p> <p style="text-align: left;">移动你的鼠标会看到不同层的动画效果，并且你还会留意到那些元素在自己移动。从而营造出一个3D的效果。</p> <h2><a href="http://www.fillstudio.com/" target="_blank">FillStudio</a></h2> <p style="text-align: center;"><a href="http://www.fillstudio.com/" target="_blank"><img class="aligncenter size-full wp-image-1134" title="fillstudio" src="http://www.gooosen.com/wp-content/uploads/2011/03/fillstudio1.jpg" alt="" width="580" height="364" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/nikebetterworld1.jpg"></a></p> <p style="text-align: left;">FillStudio有一个会自己的移动的slider，效果非常好。</p> <h2><a href="http://nikebetterworld.com/index" target="_blank">Nike Better World</a></h2> <p style="text-align: center;"><a href="http://nikebetterworld.com/index" target="_blank"><img class="aligncenter size-full wp-image-1135" title="nikebetterworld" src="http://www.gooosen.com/wp-content/uploads/2011/03/nikebetterworld1.jpg" alt="" width="580" height="364" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/farmhousefare1.jpg"></a></p> <p style="text-align: left;">这里是一个非常好的视差滚动的例子，只要你上下拉动滚动条，你就会看到不同层的不同移动速度，从而创造出更向的深度。</p> <h2><a href="http://www.farmhousefare.co.uk/" target="_blank">Farmhouse Fare</a></h2> <p style="text-align: center;"><a href="http://www.farmhousefare.co.uk/" target="_blank"><img class="aligncenter size-full wp-image-1136" title="farmhousefare" src="http://www.gooosen.com/wp-content/uploads/2011/03/farmhousefare1.jpg" alt="" width="580" height="396" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/dezignus1.jpg"></a></p> <p style="text-align: left;">Farmhouse Fare，这里的效果也是同样的微妙，并且它增强也那些精心制作的插画和照片。点击任何一个菜单的按钮，它会引导你到另一个截面，你会发现移动的元素会有轻微的不同。</p> <h2><a href="http://www.dezignus.com/" target="_blank">Dezignus</a></h2> <p style="text-align: center;"><a href="http://www.dezignus.com/" target="_blank"><img class="aligncenter size-full wp-image-1137" title="dezignus" src="http://www.gooosen.com/wp-content/uploads/2011/03/dezignus1.jpg" alt="" width="580" height="308" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/langaard1.jpg"></a></p> <p style="text-align: left;">Dezignus，你可以在头部体验到非常不错的视差效果</p> <h2><a href="http://www.langaard.no/" target="_blank">Juvelér Langaard</a></h2> <p style="text-align: center;"><a href="http://www.langaard.no/#/hjem" target="_blank"><img class="aligncenter size-full wp-image-1138" title="langaard" src="http://www.gooosen.com/wp-content/uploads/2011/03/langaard1.jpg" alt="" width="580" height="375" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/thebeatlesrockband1.jpg"></a></p> <p style="text-align: left;">在Juvelér Langaard的网站你就会发现，当使用内容滑块时，背景块的移动要比内容块要小。</p> <h2><a href="http://www.thebeatlesrockband.com/" target="_blank">The Beatles Rock Band</a></h2> <p style="text-align: center;"><a href="http://www.gooosen.com/wp-content/uploads/2011/03/thebeatlesrockband1.jpg"><img class="aligncenter size-full wp-image-1139" title="thebeatlesrockband" src="http://www.gooosen.com/wp-content/uploads/2011/03/thebeatlesrockband1.jpg" alt="" width="580" height="340" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/kalendiar1.jpg"></a></p> <p style="text-align: left;">Beatles Rock Band有一个经典的视差效果的header效果。</p> <h2><a href="http://kalendiar.lenm.cz/" target="_blank">Originální, rucne vyrábené diáre 2011</a></h2> <p style="text-align: center;"><a href="http://kalendiar.lenm.cz/" target="_blank"><img class="aligncenter size-full wp-image-1140" title="kalendiar" src="http://www.gooosen.com/wp-content/uploads/2011/03/kalendiar1.jpg" alt="" width="580" height="376" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/head2heart1.jpg"></a></p> <p style="text-align: left;">这个网站的不同背景有着不同的层次，当你移动鼠标时，给出的效果非常强烈。</p> <h2><a href="http://www.head2heart.us/" target="_blank">Head2Heart</a></h2> <p style="text-align: center;"><a href="http://www.head2heart.us/" target="_blank"><img class="aligncenter size-full wp-image-1141" title="head2heart" src="http://www.gooosen.com/wp-content/uploads/2011/03/head2heart1.jpg" alt="" width="580" height="372" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/xhtmlslicing1.jpg"></a></p> <p style="text-align: left;">一个效果漂亮得难以置信的网站，点击那个指示的小箭头，就会引导我们浏览这个精彩的网站。配合周围的云层，创造出不同的视差效果。</p> <h2><a href="http://www.xhtmlslicing.com/" target="_blank">Xhtml Slicing</a></h2> <p style="text-align: center;"><a href="http://www.xhtmlslicing.com/" target="_blank"><img class="aligncenter size-full wp-image-1142" title="xhtmlslicing" src="http://www.gooosen.com/wp-content/uploads/2011/03/xhtmlslicing1.jpg" alt="" width="580" height="358" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/emmandenn1.jpg"></a></p> <p style="text-align: left;">XHTMSlicing同样有一个跟随鼠标移动的漂亮的header。不过，这些网站的图片有的有一些不同程度的模糊效果，从而给人一种强烈的层次效果。</p> <h2><a href="http://www.emmandenn.com/" target="_blank">EMM and ENN</a></h2> <p style="text-align: center;"><a href="http://www.emmandenn.com/" target="_blank"><img class="aligncenter size-full wp-image-1143" title="emmandenn" src="http://www.gooosen.com/wp-content/uploads/2011/03/emmandenn1.jpg" alt="" width="580" height="340" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/siebennull1.jpg"></a></p> <p style="text-align: left;">在这里我们有一个经典的视差效果，同时还有不错的深度设计。</p> <h2><a href="http://www.siebennull.com/" target="_blank">Webdesign Karlsruhe</a></h2> <p style="text-align: center;"><a href="http://www.siebennull.com/" target="_blank"><img class="aligncenter size-full wp-image-1144" title="siebennull" src="http://www.gooosen.com/wp-content/uploads/2011/03/siebennull1.jpg" alt="" width="580" height="427" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/billysdiner1.jpg"></a></p> <p style="text-align: left;">这里的效果很强烈，内容会跟随鼠标移动。通过备忘录的样式加上效果出众的视差感觉，让人眼花缭乱。</p> <h3><a href="http://www.billysdiner.com/" target="_blank">Billy’s Downtown Diner</a></h3> <p style="text-align: center;"><a href="http://www.billysdiner.com/" target="_blank"><img class="size-full wp-image-1145 aligncenter" title="billysdiner" src="http://www.gooosen.com/wp-content/uploads/2011/03/billysdiner1.jpg" alt="" width="580" height="296" /></a></p> <div style="text-align: left;">Billy’s Downtown Diner在header部分，当你移动鼠标时，那些最遥远的地方移动的很慢，这样很好的突出了当中的部分。加上移动时的晃动效果，让它看起来更有趣了一些。</div> <h2><a href="http://www.rowtothepole.com/" target="_blank">Old Pulteney Row to the Pole</a></h2> <p style="text-align: center;"><a href="http://www.rowtothepole.com/" target="_blank"><img class="aligncenter size-full wp-image-1146" title="rowtothepole" src="http://www.gooosen.com/wp-content/uploads/2011/03/rowtothepole1.jpg" alt="" width="580" height="352" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/03/rastapenatal11.jpg"></a></p> <p style="text-align: left;">在这里有一个滚动的视差效果。在页面上下移动时，背景的移动速度要比内容来的慢一些，这样很使得背景显得更远一些，加强了网站的透视效果。</p> <h2><a href="http://www.rastapenatal.com.br/" target="_blank">Rastapé</a></h2> <p style="text-align: left;"><a href="http://www.rastapenatal.com.br/" target="_blank"><img class="aligncenter size-full wp-image-1147" title="rastapenatal1" src="http://www.gooosen.com/wp-content/uploads/2011/03/rastapenatal11.jpg" alt="" width="580" height="321" /></a></p> <p style="text-align: left;">创造了很多能体现深度效果的元素，当移动鼠标时，还有不错的视差效果。</p><img src="http://www1.feedsky.com/t1/511408721/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408721/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=11172在网站中使用视差效果可以为你的网站营造出一种富有立体感的设计，让你的访问者感到更为有趣。这里找出几个不错的例子，让你了解一下使用视差效果带给我的神奇。<img src="http://www1.feedsky.com/t1/511408721/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408721/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />设计灵感webTue, 08 Mar 2011 01:46:36 +0800gooosenhttp://www.gooosen.com/?p=1117#commentshttp://www.gooosen.com/?p=1117gooosenhttp://www.gooosen.com/?p=1117http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408721/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408722/6366720/1/item.html<p><a title="Neteye Activity Indicator" href="http://neteye.github.com/activity-indicator.html" target="_blank">NETEYE Activity Indicator</a>是一个基于JQuery的插件,它可以呈现一个半透明效果的指示器,可以用于SVG 或 VML.它可以在任何浏览器上运行,要求JQuery 1.4.2(或更高).除此之外不需要任何文件,特别是没有CSS样式表和图片文件.</p> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/activity-indicator.jpg"><img class="aligncenter size-full wp-image-1104" title="activity-indicator" src="http://www.gooosen.com/wp-content/uploads/2011/01/activity-indicator.jpg" alt="" width="480" height="144" /></a></p> <p style="padding-left: 90px;">要求:jQuery Framework</p> <p style="padding-left: 90px;">Demo:<a href="http://tympanus.net/Tutorials/AnimatedFormSwitching/"> </a><a title="demo" rel="nofollow" href="http://neteye.github.com/activity-indicator.html" target="_blank">http://neteye.github.com/activity-indicator.html</a></p><img src="http://www1.feedsky.com/t1/511408722/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408722/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=11030NETEYE Activity Indicator是一个基于JQuery的插件,它可以呈现一个半透明效果的指示器,可以用于SVG 或 VML.它可以在任何浏览器上运行,要求JQuery 1.4.2(或更高).除此之外不需要任何文件,特别是没有CSS样式表和图片文件.<img src="http://www1.feedsky.com/t1/511408722/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408722/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Wed, 12 Jan 2011 10:47:59 +0800gooosenhttp://www.gooosen.com/?p=1103#commentshttp://www.gooosen.com/?p=1103gooosenhttp://www.gooosen.com/?p=1103http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408722/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408723/6366720/1/item.html<p>看看这次<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>又给我们带来了什么&#8211;<a href="http://tympanus.net/codrops/2011/01/06/animated-form-switching/" target="_blank">Animated Form Switching with jQuery</a>.这次<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>用了一个登录的UI和三个例子来讲解动画开关.它的想法是,不用跳到其实页面,只是当用户有其他的需求时,只是通过改变当前容器的大小,尺寸,内容等.</p> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/AnimatedFormSwitching.jpg"><img class="aligncenter size-full wp-image-1100" title="AnimatedFormSwitching" src="http://www.gooosen.com/wp-content/uploads/2011/01/AnimatedFormSwitching.jpg" alt="" width="580" height="315" /></a></p> <p style="padding-left: 60px;">要求:jQuery Framework</p> <p style="padding-left: 60px;">Demo:<a href="http://tympanus.net/Tutorials/AnimatedFormSwitching/"> http://tympanus.net/Tutorials/AnimatedFormSwitching/</a></p><img src="http://www1.feedsky.com/t1/511408723/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408723/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10990看看这次Codrops又给我们带来了什么--Animated Form Switching with jQuery.这次Codrops用了一个登录的UI和三个例子来讲解动画开关.它的想法是,不用跳到其实页面,只是当用户有其他的需求时,只是通过改变当前容器的大小,尺寸,内容等.<img src="http://www1.feedsky.com/t1/511408723/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408723/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />jqueryJavaScript设计Sun, 09 Jan 2011 11:10:07 +0800gooosenhttp://www.gooosen.com/?p=1099#commentshttp://www.gooosen.com/?p=1099gooosenhttp://www.gooosen.com/?p=1099http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408723/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408724/6366720/1/item.html<p><a title="Custom Scrollbar Plugin" href="http://manos.malihu.gr/jquery-custom-content-scroller" target="_blank">Custom scrollbar plugin</a>是一款自定义滚动条的UI JQuery 插件,它完全使用CSS定制.特点在于可以水平与垂直滚动并支持鼠标滚轮,可随意调节滚动条的高度和宽度.</p> <p>你需要调用jquery.min.js 和 jquery-ui.min.js,jquery.easing.1.3.js(用来处理动画),jquery.mousewheel.min.js(支持鼠标滚轮的功能),jquery.mCustomScrollbar.css这个样式表.你就可以随意控制你的滚动条的样式和风格了.</p> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/custom-scrollbar.png"><img class="aligncenter size-full wp-image-1097" title="custom-scrollbar" src="http://www.gooosen.com/wp-content/uploads/2011/01/custom-scrollbar.png" alt="" width="480" height="221" /></a></p> <p style="padding-left: 90px;">要求:jQuery Framework</p> <p style="padding-left: 90px;">Demo: <a title="demo" rel="nofollow" href="http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html" target="_blank">http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html</a></p><img src="http://www1.feedsky.com/t1/511408724/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408724/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10961Custom scrollbar plugin是一款自定义滚动条的UI JQuery 插件,它完全使用CSS定制.特点在于可以水平与垂直滚动并支持鼠标滚轮,可随意调节滚动条的高度和宽度.<img src="http://www1.feedsky.com/t1/511408724/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408724/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Wed, 05 Jan 2011 09:26:16 +0800gooosenhttp://www.gooosen.com/?p=1096#commentshttp://www.gooosen.com/?p=1096gooosenhttp://www.gooosen.com/?p=1096http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408724/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408725/6366720/1/item.html<p>这里挑选了20张精美的剪影式的摄影,它们用丰富的创造性,加上给人以神秘,戏剧,赋予感情的感觉,让我感觉它们真的很了不起.</p> <h2>1. <a href="http://m3tzgore.deviantart.com/art/Silhouette-161187894" target="_blank">Silhouette</a> by: <a href="http://m3tzgore.deviantart.com/" target="_blank">m3tzgore</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/1b7b1a9069d3d356069766e04d7fa2ec.jpg"><img class="aligncenter size-full wp-image-1091" title="1b7b1a9069d3d356069766e04d7fa2ec" src="http://www.gooosen.com/wp-content/uploads/2011/01/1b7b1a9069d3d356069766e04d7fa2ec.jpg" alt="" width="570" height="304" /></a></p> <h2>2. <a href="http://attlid.deviantart.com/art/Silhouette-of-a-horse-52884208" target="_blank">Silhouette of a Horse</a> by: <a href="http://attlid.deviantart.com/" target="_blank">attlid</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_of_a_horse_by_attlid.jpg"><img class="aligncenter size-full wp-image-1090" title="Silhouette_of_a_horse_by_attlid" src="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_of_a_horse_by_attlid.jpg" alt="" width="570" height="393" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_asininechani.jpg"></a></p> <h2>3. <a href="http://asininechani.deviantart.com/art/sunset-silhouette-77700091" target="_blank">Sunset Silhouette</a> by: <a href="http://asininechani.deviantart.com/" target="_blank">asininechani</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_asininechani.jpg"><img class="aligncenter size-full wp-image-1089" title="sunset_silhouette_by_asininechani" src="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_asininechani.jpg" alt="" width="570" height="382" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/d87d9de66695570df680a50feb41a36c-d33y4r3.jpg"></a></p> <h2>4. <a href="http://nikolinelr.deviantart.com/art/silhouette-188029839" target="_blank">Silhouette</a> by: <a href="http://nikolinelr.deviantart.com/" target="_blank">nikolinelr</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/d87d9de66695570df680a50feb41a36c-d33y4r3.jpg"><img class="aligncenter size-full wp-image-1088" title="d87d9de66695570df680a50feb41a36c-d33y4r3" src="http://www.gooosen.com/wp-content/uploads/2011/01/d87d9de66695570df680a50feb41a36c-d33y4r3.jpg" alt="" width="570" height="568" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/a_silhouette_by_nickeeer.jpg"></a></p> <h2>5. <a href="http://nickeeer.deviantart.com/art/a-silhouette-33703767" target="_blank">A Silhouette</a> by: <a href="http://nickeeer.deviantart.com/" target="_blank">nickeeer</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/a_silhouette_by_nickeeer.jpg"><img class="aligncenter size-full wp-image-1087" title="a_silhouette_by_nickeeer" src="http://www.gooosen.com/wp-content/uploads/2011/01/a_silhouette_by_nickeeer.jpg" alt="" width="570" height="382" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_iPingu.jpg"></a></p> <h2>6. <a href="http://ipingu.deviantart.com/art/Silhouette-141452748" target="_blank">Silhouette</a> by: <a href="http://ipingu.deviantart.com/" target="_blank">iPingu</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_iPingu.jpg"><img class="aligncenter size-full wp-image-1086" title="Silhouette_by_iPingu" src="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_iPingu.jpg" alt="" width="570" height="379" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_of_hamburg_in_sunse_by_rockmylife-d34ecu1.jpg"></a></p> <h2>7.<a href="http://rockmylife.deviantart.com/art/silhouette-of-Hamburg-in-sunse-188786809" target="_blank">Silhouette of Hamburg in sunse</a> by: <a href="http://rockmylife.deviantart.com/" target="_blank">rockmylife</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_of_hamburg_in_sunse_by_rockmylife-d34ecu1.jpg"><img class="aligncenter size-full wp-image-1085" title="silhouette_of_hamburg_in_sunse_by_rockmylife-d34ecu1" src="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_of_hamburg_in_sunse_by_rockmylife-d34ecu1.jpg" alt="" width="570" height="428" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_IndianRain.jpg"></a></p> <h2>8. <a href="http://indianrain.deviantart.com/art/Silhouette-146109322" target="_blank">Silhouette</a> by: <a href="http://indianrain.deviantart.com/" target="_blank">IndianRain</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_IndianRain.jpg"><img class="aligncenter size-full wp-image-1084" title="Silhouette_by_IndianRain" src="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_IndianRain.jpg" alt="" width="570" height="428" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Witch_Silhouette_by_primalx.jpg"></a></p> <h2>9. <a href="http://primalx.deviantart.com/art/Witch-Silhouette-23993532" target="_blank">Witch Silhouette</a> by: <a href="http://primalx.deviantart.com/" target="_blank">primalx</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Witch_Silhouette_by_primalx.jpg"><img class="aligncenter size-full wp-image-1083" title="Witch_Silhouette_by_primalx" src="http://www.gooosen.com/wp-content/uploads/2011/01/Witch_Silhouette_by_primalx.jpg" alt="" width="500" height="334" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_matinee.jpg"></a></p> <h2>10. <a href="http://matinee.deviantart.com/art/sunset-silhouette-14637016" target="_blank">Sunset Silhouette</a> by: <a href="http://matinee.deviantart.com/" target="_blank">matinee</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_matinee.jpg"><img class="aligncenter size-full wp-image-1082" title="sunset_silhouette_by_matinee" src="http://www.gooosen.com/wp-content/uploads/2011/01/sunset_silhouette_by_matinee.jpg" alt="" width="570" height="691" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/photographer_silhouette_by_iky22.jpg"></a></p> <h2>11. <a href="http://iky22.deviantart.com/art/photographer-silhouette-121251496" target="_blank">Photographer Silhouette</a> by: <a href="http://iky22.deviantart.com/" target="_blank">iky22</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/photographer_silhouette_by_iky22.jpg"><img class="aligncenter size-full wp-image-1081" title="photographer_silhouette_by_iky22" src="http://www.gooosen.com/wp-content/uploads/2011/01/photographer_silhouette_by_iky22.jpg" alt="" width="533" height="800" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/66ea588c9dda11dc5cb8e47f573c9453-d2z5fe8.jpg"></a></p> <h2>12. <a href="http://chik1117.deviantart.com/art/Sunset-Silhouette-179972144" target="_blank">Sunset Silhouette</a> by: <a href="http://chik1117.deviantart.com/" target="_blank">chik1117</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/66ea588c9dda11dc5cb8e47f573c9453-d2z5fe8.jpg"><img class="aligncenter size-full wp-image-1080" title="66ea588c9dda11dc5cb8e47f573c9453-d2z5fe8" src="http://www.gooosen.com/wp-content/uploads/2011/01/66ea588c9dda11dc5cb8e47f573c9453-d2z5fe8.jpg" alt="" width="533" height="800" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/on_a_silhouette_day_ii_by_aurrum-d2yhdgs.jpg"></a></p> <h2>13. <a href="http://aurrum.deviantart.com/art/On-A-Silhouette-Day-II-178849900" target="_blank">On A Silhouette Day II</a> by: <a href="http://aurrum.deviantart.com/" target="_blank">Aurrum</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/on_a_silhouette_day_ii_by_aurrum-d2yhdgs.jpg"><img class="aligncenter size-full wp-image-1079" title="on_a_silhouette_day_ii_by_aurrum-d2yhdgs" src="http://www.gooosen.com/wp-content/uploads/2011/01/on_a_silhouette_day_ii_by_aurrum-d2yhdgs.jpg" alt="" width="570" height="855" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Summer__s_Silhouette_by_TheAcolyte.jpg"></a></p> <h2>14. <a href="http://theacolyte.deviantart.com/art/Summer-s-Silhouette-58562820" target="_blank">Summer’s Silhouette</a> by: <a href="http://theacolyte.deviantart.com/" target="_blank">TheAcolyte</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Summer__s_Silhouette_by_TheAcolyte.jpg"><img class="aligncenter size-full wp-image-1078" title="Summer__s_Silhouette_by_TheAcolyte" src="http://www.gooosen.com/wp-content/uploads/2011/01/Summer__s_Silhouette_by_TheAcolyte.jpg" alt="" width="570" height="398" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/15b4918bf021305b.jpg"></a></p> <h2>15. <a href="http://rockerbmg666.deviantart.com/art/Me-and-my-Love-SILHOUETTE-69215147" target="_blank">Me and My Love Silhouette</a> by: <a href="http://rockerbmg666.deviantart.com/" target="_blank">rockerbmg666</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/15b4918bf021305b.jpg"><img class="aligncenter size-full wp-image-1077" title="15b4918bf021305b" src="http://www.gooosen.com/wp-content/uploads/2011/01/15b4918bf021305b.jpg" alt="" width="570" height="428" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/The_Silhouette_of_a_Tree_by_sara_satellite.jpg"></a></p> <h2>16. <a href="http://sara-satellite.deviantart.com/art/The-Silhouette-of-a-Tree-173802541" target="_blank">The Silhouette of a Tree</a> by: <a href="http://sara-satellite.deviantart.com/" target="_blank">sara-satellite</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/The_Silhouette_of_a_Tree_by_sara_satellite.jpg"><img class="aligncenter size-full wp-image-1076" title="The_Silhouette_of_a_Tree_by_sara_satellite" src="http://www.gooosen.com/wp-content/uploads/2011/01/The_Silhouette_of_a_Tree_by_sara_satellite.jpg" alt="" width="570" height="383" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Sunset_Silhouette_by_andrewapuya.jpg"></a></p> <h2>17. <a href="http://andrewapuya.deviantart.com/art/Sunset-Silhouette-73841982" target="_blank">Sunset Silhouette</a> by: <a href="http://andrewapuya.deviantart.com/" target="_blank">andrewapuya</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Sunset_Silhouette_by_andrewapuya.jpg"><img class="aligncenter size-full wp-image-1075" title="Sunset_Silhouette_by_andrewapuya" src="http://www.gooosen.com/wp-content/uploads/2011/01/Sunset_Silhouette_by_andrewapuya.jpg" alt="" width="570" height="390" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_paddle_surf_boys_by_la_vita_a_bella-d2xo1j6.jpg"></a></p> <h2>18. <a href="http://la-vita-a-bella.deviantart.com/art/Silhouette-Paddle-Surf-Boys-177481410" target="_blank">Silhouette Paddle Surf Boys</a> by: <a href="http://la-vita-a-bella.deviantart.com/" target="_blank">La-Vita-a-Bella</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_paddle_surf_boys_by_la_vita_a_bella-d2xo1j6.jpg"><img class="aligncenter size-full wp-image-1074" title="silhouette_paddle_surf_boys_by_la_vita_a_bella-d2xo1j6" src="http://www.gooosen.com/wp-content/uploads/2011/01/silhouette_paddle_surf_boys_by_la_vita_a_bella-d2xo1j6.jpg" alt="" width="570" height="380" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/415bf7d981d326ecd0960ed872dca4f1.jpg"></a></p> <h2>19. <a href="http://emman03.deviantart.com/art/1st-Silhouette-Practice-85534086" target="_blank">1st Silhouette Practice</a> by: <a href="http://emman03.deviantart.com/" target="_blank">emman03</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/415bf7d981d326ecd0960ed872dca4f1.jpg"><img class="aligncenter size-full wp-image-1073" title="415bf7d981d326ecd0960ed872dca4f1" src="http://www.gooosen.com/wp-content/uploads/2011/01/415bf7d981d326ecd0960ed872dca4f1.jpg" alt="" width="570" height="400" /></a> <a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_7LM.jpg"></a></p> <h2>20. <a href="http://7lm.deviantart.com/art/Silhouette-159956996" target="_blank">Silhouette</a> by: <a href="http://7lm.deviantart.com/" target="_blank">7LM</a></h2> <p><a href="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_7LM.jpg"><img class="aligncenter size-full wp-image-1072" title="Silhouette_by_7LM" src="http://www.gooosen.com/wp-content/uploads/2011/01/Silhouette_by_7LM.jpg" alt="" width="452" height="630" /></a></p><img src="http://www1.feedsky.com/t1/511408725/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408725/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10700这里挑选了20张精美的剪影式的摄影,它们用丰富的创造性,加上给人以神秘,戏剧,赋予感情的感觉,让我感觉它们真的很了不起.<img src="http://www1.feedsky.com/t1/511408725/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408725/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />摄影素材Mon, 03 Jan 2011 23:15:55 +0800gooosenhttp://www.gooosen.com/?p=1070#commentshttp://www.gooosen.com/?p=1070gooosenhttp://www.gooosen.com/?p=1070http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408725/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408726/6366720/1/item.html<p>新的一年开始了,<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>在新年的伊始又放出一个幻灯插件&#8211;Parallax Slider.它运用了视觉差的原理,在我们移动幻灯片时带给我们一种很奇特的效果.同时<a href="http://tympanus.net/codrops/" target="_blank">Codrops</a>还写出一个教程来指导我们如果编写和使用这们插件.如果你想要一个与众不同的幻灯片效果,可以试试这个.</p> <p><a href="http://tympanus.net/codrops/2011/01/03/parallax-slider/"><img class="aligncenter size-full wp-image-1065" title="parallax_slider" src="http://www.gooosen.com/wp-content/uploads/2011/01/parallax_slider.jpg" alt="" width="580" height="315" /></a></p> <p style="padding-left: 60px;">要求:jQuery Framework</p> <p style="padding-left: 60px;">Demo: <a href="http://tympanus.net/Tutorials/ParallaxSlider/" target="_blank">http://tympanus.net/Tutorials/ParallaxSlider/</a></p><img src="http://www1.feedsky.com/t1/511408726/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408726/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10630新的一年开始了,Codrops在新年的伊始又放出一个幻灯插件--Parallax Slider.它运用了视觉差的原理,在我们移动幻灯片时带给我们一种很奇特的效果.同时Codrops还写出一个教程来指导我们如果编写和使用这们插件.如果你想要一个与众不同的幻灯片效果,可以试试这个.<img src="http://www1.feedsky.com/t1/511408726/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408726/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Mon, 03 Jan 2011 22:00:07 +0800gooosenhttp://www.gooosen.com/?p=1063#commentshttp://www.gooosen.com/?p=1063gooosenhttp://www.gooosen.com/?p=1063http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408726/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408727/6366720/1/item.html<p><a title="Booklet" href="http://builtbywill.com/code/booklet/" target="_blank">Booklet</a>是一个可以让你网页上的内容已一本连环册一样的样式展示出来的JQuery工具.它基于JQuery库.<strong>Codrops</strong>写了一个教程,以指导我们如何初始化和使用这个工具.来创建一个JQuery的Moleskine notebook</p> <p style="text-align: center;"><a href="http://tympanus.net/codrops/2010/12/14/moleskine-notebook/" target="_blank"><img class="size-full wp-image-1058 aligncenter" title="moleskine-notebook" src="http://www.gooosen.com/wp-content/uploads/2011/01/moleskine-notebook.png" alt="" width="480" height="261" /></a></p> <p style="padding-left: 90px;">要求:jQuery Framework</p> <p style="padding-left: 90px;">Demo: <a title="demo" rel="nofollow" href="http://tympanus.net/Tutorials/MoleskineNotebook/" target="_blank">http://tympanus.net/Tutorials/MoleskineNotebook/</a></p><img src="http://www1.feedsky.com/t1/511408727/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408727/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10572Booklet是一个可以让你网页上的内容已一本连环册一样的样式展示出来的JQuery工具.它基于JQuery库.Codrops写了一个教程,以指导我们如何初始化和使用这个工具.来创建一个JQuery的Moleskine notebook<img src="http://www1.feedsky.com/t1/511408727/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408727/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Sat, 01 Jan 2011 22:19:25 +0800gooosenhttp://www.gooosen.com/?p=1057#commentshttp://www.gooosen.com/?p=1057gooosenhttp://www.gooosen.com/?p=1057http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408727/6366720http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408728/6366720/1/item.html<p><a title="Contained Sticky Scroll" href="http://blog.echoenduring.com/2010/11/15/freebie-contained-sticky-scroll-jquery-plugin/" target="_blank">Contained Sticky Scroll</a>允许你创建一个可以&#8221;粘&#8221;在浏览器顶部的滑动框,但是同时不会影响他的父元素.</p> <p>这个下载包中包含了完整版的JS和压缩版,以及一个Demo演示网页.其中介绍了如何配置插件的每个功能和一些初始化的选项.经过测试,<a title="Contained Sticky Scroll" href="http://blog.echoenduring.com/2010/11/15/freebie-contained-sticky-scroll-jquery-plugin/" target="_blank">Contained Sticky Scroll</a>可用于Firefox,Chrome,Safari和Internet Explorer 8.</p> <p style="text-align: center;"><a href="http://blog.echoenduring.com/2010/11/15/freebie-contained-sticky-scroll-jquery-plugin/" target="_blank"><img class="aligncenter size-full wp-image-1051" title="sticky-scroll" src="http://www.gooosen.com/wp-content/uploads/2010/12/sticky-scroll.png" alt="" width="480" height="239" /></a></p> <p style="padding-left: 60px;">要求框架:jQuery Framework</p> <p style="padding-left: 60px;">Demo:<a title="demo" rel="nofollow" href="http://blog.echoenduring.com/wp-content/uploads/demos/echo_ContainedStickyScroll/" target="_blank">http://blog.echoenduring.com/wp-content/uploads/demos…</a></p> <p style="padding-left: 60px;"> <h2>PS:   在2011年这里将每天为大家分享一个国外的优秀JQueryPlugin,希望喜欢JQuery的爱好者们能够找到自己的学习素材,能多一点帮助到大家</h2><img src="http://www1.feedsky.com/t1/511408728/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408728/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />http://www.gooosen.com/?feed=rss2&p=10490Contained Sticky Scroll允许你创建一个可以"粘"在浏览器顶部的滑动框,但是同时不会影响他的父元素.<img src="http://www1.feedsky.com/t1/511408728/gooosenWeb/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/gooosenWeb/~8134134/511408728/6366720/1/item.html" border="0" height="0" width="0" style="position:absolute" />JqueryjqueryJavaScript设计Fri, 31 Dec 2010 21:53:05 +0800gooosenhttp://www.gooosen.com/?p=1049#commentshttp://www.gooosen.com/?p=1049gooosenhttp://www.gooosen.com/?p=1049http://www.gooosen.com/?feed=rss2feedsky/gooosenWeb/~8134134/511408728/6366720