﻿<?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>JSSAY&#039;S BLOG &#187; JQuery Plugin</title>
	<atom:link href="http://www.jssay.com/blog/index.php/tag/jquery-plugin/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jssay.com/blog</link>
	<description>关注Java, Linux, 互联网, SEO, Wordpress, Jquery, Web前端</description>
	<lastBuildDate>Fri, 30 Sep 2011 09:13:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>11个有用的Tab导航解决方案</title>
		<link>http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/</link>
		<comments>http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/#comments</comments>
		<pubDate>Wed, 29 Sep 2010 15:41:47 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[Jquery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>
		<category><![CDATA[JQuery tabs]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=1248</guid>
		<description><![CDATA[有时候使用tab是非常明智的，当你的屏幕宽度不能完全显示网页内容的时候，tab能够节省很多空间，使用户能在一个相对比较小的空间内触发页面元素。为了使你的tab功能更进一步，你可以将jQuery整合进来，来实现良好的过度和动画效果。如果你还没有用jQuery构建过任何tab导航，这里为你提供了11个新手指南和插件来帮助你从头开始。

<h3><a href="http://css-tricks.com/organic-tabs/" target="_blank">使用jQuery创建一个tab界面</a></h3> 
<p><a href="http://css-tricks.com/organic-tabs/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_11.jpg" alt="jquery tab navigation" /></a></p> 
<p>一个用于创建动画效果的tab区域的指南和插件</p> ]]></description>
			<content:encoded><![CDATA[<p>有时候使用tab是非常明智的，当你的屏幕宽度不能完全显示网页内容的时候，tab能够节省很多空间，使用户能在一个相对比较小的空间内触发页面元素。为了使你的tab功能更进一步，你可以将jQuery整合进来，来实现良好的过度和动画效果。如果你还没有用jQuery构建过任何tab导航，这里为你提供了11个新手指南和插件来帮助你从头开始。</p>
<h3><a href="http://css-tricks.com/organic-tabs/" target="_blank">Create A Tabbed Interface Using jQuery</a></h3>
<p><a href="http://css-tricks.com/organic-tabs/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_11.jpg" alt="jquery tab navigation" /></a></p>
<p>一个用于创建动画效果的tab区域的指南和插件</p>
<h3><a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" target="_blank">用jQUery1.4和CSS3实现的非常可爱的Ajax Tab</a></h3>
<p><a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_1.jpg" alt="jquery tab navigation" /></a></p>
<p>在这个指南中，你会学到如何利用CSS3和jQuery创建一个Ajax驱动的tab页面</p>
<h3><a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/" target="_blank">Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery</a></h3>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_3.jpg" alt="jquery tab navigation" /></a></p>
<p>这份指南教你如何使用一些有趣的jQuery动画建立一个tab效果的博客列表</p>
<h3><a href="http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">使用CSS和jQuery创建一个巧妙的tab效果的内容区域</a></h3>
<p><a href="http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_4.jpg" alt="jquery tab navigation" /></a></p>
<p>这份指南教你如何使用HTML建立一个简单的tab消息盒,然后使用一些简单的javascript来完善它的功能，最后我们将使用jQuery库来归档相同的东西。</p>
<h3><a href="http://jqueryglobe.com/article/feature-list" target="_blank">特征列表</a></h3>
<p><a href="http://jqueryglobe.com/article/feature-list" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_10.jpg" alt="jquery tab navigation" /></a></p>
<p>这个jQuery插件能够非常容易地创建一个交互式的特征项目窗口</p>
<h3><a href="http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/" target="_blank">基于jquery的酷炫滑动表单</a></h3>
<p><a href="http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_5.jpg" alt="jquery tab navigation" /></a></p>
<p>这份指南教你如何创建一个华丽的滑动表单，在每一步过后向用户显示一些验证信息，这个表单节省了许多空间，并且很容易访问，它基本上就是一个Slider,只是我们用一个个表单字段取代了图片而已。</p>
<h3><a href="http://net.tutsplus.com/javascript-ajax/create-a-tabbed-interface-using-jquery/" target="_blank">Create A Tabbed Interface Using jQuery</a></h3>
<p><a href="http://net.tutsplus.com/javascript-ajax/create-a-tabbed-interface-using-jquery/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_2.jpg" alt="jquery tab navigation" /></a></p>
<p>这份指南教你如何使用jQuery UI库里面的Tabs功能来创建一个tab界面。</p>
<h3><a href="http://www.unwrongest.com/projects/tabify/" target="_blank">Tabify</a></h3>
<p><a href="http://www.unwrongest.com/projects/tabify/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_6.jpg" alt="jquery tab navigation" /></a></p>
<p>这个jQuery插件让你更加容易地创建tab内容，你所需要的只是一个带有li元素的ul元素和一对相应的内容div标签，Tabify和它的竞争者的主要差别在于他们的大小。</p>
<h3><a href="http://github.com/ginader/Accessible-Tabs" target="_blank">Accessible-Tabs</a></h3>
<p><a href="http://github.com/ginader/Accessible-Tabs" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_7.jpg" alt="jquery tab navigation" /></a></p>
<p>jquery插件来的</p>
<h3><a href="http://www.sunsean.com/idTabs/" target="_blank">idTabs</a></h3>
<p><a href="http://www.sunsean.com/idTabs/" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_8.jpg" alt="jquery tab navigation" /></a></p>
<p>idTabs一款jQuery的插件，它使得增加tab到网页中变得超级简单，同时它也打开了一道通向无限可能的大门。</p>
<h3><a href="http://www.queness.com/post/655/jquery-moving-tab-and-sliding-content-tutorial" target="_blank">基于jQuery的可移动的tab和可滑动的内容指南</a></h3>
<p><a href="http://www.queness.com/post/655/jquery-moving-tab-and-sliding-content-tutorial" target="_blank"><img src="http://webdesignledger.com/wp-content/uploads/2010/09/jquery_tabs_9.jpg" alt="jquery tab navigation" /></a></p>
<p>学习如何使用简单的jQuery代码建立熔岩灯效果的tab和滑动的内容，这个脚本对展示最近的文章、评论和社区新闻非常适合。</p>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/">http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2010年09月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/" title="46个功能强大的Javascript滑动器和滚动条">46个功能强大的Javascript滑动器和滚动条</a></li><li>2010年09月22日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/" title="24个高级JQuery特效">24个高级JQuery特效</a></li><li>2009年12月13日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/" title="2009 年度最佳 jQuery 插件（转）">2009 年度最佳 jQuery 插件（转）</a></li><li>2009年11月29日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/" title="用Jquery制作的几款3D效果">用Jquery制作的几款3D效果</a></li><li>2009年11月6日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/" title="1000个JQuery极品插件(连载中&#8230;)">1000个JQuery极品插件(连载中&#8230;)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>46个功能强大的Javascript滑动器和滚动条</title>
		<link>http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/</link>
		<comments>http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/#comments</comments>
		<pubDate>Tue, 28 Sep 2010 13:56:01 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[Jquery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>
		<category><![CDATA[Jquery Scroller]]></category>
		<category><![CDATA[Jquery Slider]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=1246</guid>
		<description><![CDATA[每个Web开发人员都需要使用javascript来构建web应用，当需要用一个简单的滑动器或者滚动条实现在页面上展示多个条目的时候，你可以使用带有新闻、图片、产品的javascript滑动器和滚动条,用一种有组织良好的、对用户友好的方式去显示数据。在这篇文章里，我为你准备了46款功能非常强大的javascript滑动器和滚动条，来帮助你 更好地开发web应用。]]></description>
			<content:encoded><![CDATA[<p>每个Web开发人员都需要使用javascript来构建web应用，当需要用一个简单的滑动器或者滚动条实现在页面上展示多个条目的时候，你可以使用带有新闻、图片、产品的javascript滑动器和滚动条,用一种有组织良好的、对用户友好的方式去显示数据。在这篇文章里，我为你准备了46款功能非常强大的javascript滑动器和滚动条，来帮助你 更好地开发web应用。</p>
<h2>1. <a target="_blank" href="http://manos.malihu.gr/jquery-thumbnail-scroller">jquery Thumbnail Scroller</a>, <a target="_blank" href="http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_horizontal_full_light.html">Demo<br /> <br />
</a></h2>
<p><a target="_blank" href="http://manos.malihu.gr/jquery-thumbnail-scroller"><img class="aligncenter size-full wp-image-26057" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jquery-thumbnail-scroller.png" alt="" width="500" height="317" /></a></p>
<h2>2. <a target="_blank" href="http://www.jcoverflip.com/">JCoverflip</a>, <a target="_blank" href="http://www.jcoverflip.com/demo">Demo<br /> <br />
</a></h2>
<p><a target="_blank" href="http://www.jcoverflip.com/"><img class="aligncenter size-full wp-image-26059" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/JCoverflip.png" alt="" width="500" height="244" /></a></p>
<h2>3. <a target="_blank" href="http://workshop.rs/projects/coin-slider/">COIN SLIDER</a></h2>
<p><a target="_blank" href="http://workshop.rs/projects/coin-slider/"><img class="aligncenter size-full wp-image-26061" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/COIN-SLIDER.png" alt="" width="500" height="278" /></a></p>
<h2>4. <a target="_blank" href="http://nathansearles.com/loopedslider/">loopedSlider</a>, <a target="_blank" href="http://nathansearles.com/loopedslider/example-4.html">Demo</a></h2>
<p><a target="_blank" href="http://nathansearles.com/loopedslider/"><img class="aligncenter size-full wp-image-26062" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/loopedSlider.png" alt="" width="500" height="356" /></a></p>
<h2>5. <a target="_blank" href="http://nivo.dev7studios.com/">Nivo Slider</a></h2>
<p><a target="_blank" href="http://nivo.dev7studios.com/"><img class="aligncenter size-full wp-image-26064" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Nivo-Slider.png" alt="" width="500" height="239" /></a></p>
<h2>6. <a target="_blank" href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/">Automatic Image Slider w/ CSS &amp; jQuery</a>, <a target="_blank" href="http://www.sohtanaka.com/web-design/examples/image-slider/">Demo</a></h2>
<p><a target="_blank" href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/"><img class="aligncenter size-full wp-image-26075" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Automatic-Image-Slider-w-CSS-jQuery.png" alt="" width="500" height="184" /></a></p>
<h2>7. <a target="_blank" href="http://landofcoder.com/our-porfolios/mootool-plugins/item/8-the-lof-sidernews-plugin.html">Lof SiderNews</a>, <a target="_blank" href="http://landofcoder.com/demo/mootool/lofslidernews/index2.html">Demo</a></h2>
<p><a target="_blank" href="http://landofcoder.com/our-porfolios/mootool-plugins/item/8-the-lof-sidernews-plugin.html"><img class="aligncenter size-full wp-image-26078" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Lof-SiderNews.png" alt="" width="500" height="171" /></a></p>
<h2>8. <a target="_blank" href="http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html">Advanced jQuery background image slideshow</a>, <a target="_blank" href="http://demo.marcofolio.net/bgimg_slideshow/">Demo</a></h2>
<p><a target="_blank" href="http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html"><img class="aligncenter size-full wp-image-26080" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Advanced-jQuery-background-image-slideshow.png" alt="" width="500" height="278" /></a></p>
<h2>9. <a target="_blank" href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/">jqFancyTransitions</a>, <a target="_blank" href="http://workshop.rs/projects/jqfancytransitions/">Demo</a></h2>
<p><a target="_blank" href="http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/"><img class="aligncenter size-full wp-image-26085" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jqFancyTransitions.png" alt="" width="500" height="380" /></a></p>
<h2>10. <a target="_blank" href="http://www.littlewebthings.com/projects/blinds/">jQuery Blinds Slideshow using CSS Sprites</a></h2>
<p><a target="_blank" href="http://www.littlewebthings.com/projects/blinds/"><img class="aligncenter size-full wp-image-26086" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jQuery-Blinds-Slideshow-using-CSS-Sprites.png" alt="" width="500" height="249" /></a></p>
<h2>11. <a target="_blank" href="http://jqueryglobe.com/article/multiple-image-cross-fade">Multiple Image Cross Fade</a>, <a target="_blank" href="http://jqueryglobe.com/labs/fading_images/">Demo</a></h2>
<p><a target="_blank" href="http://jqueryglobe.com/article/multiple-image-cross-fade"><img class="aligncenter size-full wp-image-26087" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Multiple-Image-Cross-Fade.png" alt="" width="500" height="370" /></a></p>
<h2>12. <a target="_blank" href="http://devthought.com/projects/mootools/barackslideshow/">BarackSlideshow</a>, <a target="_blank" href="http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/">Demo</a></h2>
<p><a target="_blank" href="http://devthought.com/projects/mootools/barackslideshow/"><img class="aligncenter size-full wp-image-26089" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/BarackSlideshow.png" alt="" width="500" height="257" /></a></p>
<h2>13. <a target="_blank" href="http://blog.olicio.us/2009/07/25/floom/">Floom: Blinds-effect MooTools slideshow</a>, <a target="_blank" href="http://nouincolor.com/floom/1.1/Demos/">Demo</a></h2>
<p><a target="_blank" href="http://blog.olicio.us/2009/07/25/floom/"><img class="aligncenter size-full wp-image-26092" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Floom-Blinds-effect-MooTools-slideshow.png" alt="" width="500" height="218" /></a></p>
<h2>14. <a target="_blank" href="http://jqueryglobe.com/article/slide-thumbs">Slide Thumbs</a>, <a target="_blank" href="http://jqueryglobe.com/labs/slide_thumbs/">Demo</a></h2>
<p><a target="_blank" href="http://jqueryglobe.com/article/slide-thumbs"><img class="aligncenter size-full wp-image-26093" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Slide-Thumbs.png" alt="" width="500" height="477" /></a></p>
<h2>15. <a target="_blank" href="http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/">Animate Panning Slideshow with jQuery</a>, <a target="_blank" href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm">Demo</a></h2>
<p><a target="_blank" href="http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/"><img class="aligncenter size-full wp-image-26094" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Animate-Panning-Slideshow-with-jQuery.png" alt="" width="500" height="284" /></a></p>
<h2>16. <a target="_blank" href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html">Beautiful jQuery slider</a>, <a target="_blank" href="http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html">Demo</a></h2>
<p><a target="_blank" href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html"><img class="aligncenter size-full wp-image-26096" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Beautiful-jQuery-slider.png" alt="" width="500" height="151" /></a></p>
<h2>17. <a target="_blank" href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en">jQuery Multimedia Portfolio</a>, <a target="_blank" href="http://www.openstudio.fr/jquery/">Demo</a></h2>
<p><a target="_blank" href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en"><img class="aligncenter size-full wp-image-26097" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jQuery-Multimedia-Portfolio.png" alt="" width="500" height="158" /></a></p>
<h2>18. <a target="_blank" href="http://www.ndoherty.biz/tag/coda-slider/">Coda-Slider</a>, <a target="_blank" href="http://www.ndoherty.biz/demos/coda-slider/2.0/">Demo</a></h2>
<p><a target="_blank" href="http://www.ndoherty.biz/tag/coda-slider/"><img class="aligncenter size-full wp-image-26098" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Coda-Slider.png" alt="" width="500" height="289" /></a></p>
<h2>19. <a target="_blank" href="http://jqueryfordesigners.com/slider-gallery/">Slider Gallery</a>, <a target="_blank" href="http://jqueryfordesigners.com/demo/slider-gallery.html">Demo</a></h2>
<p><a target="_blank" href="http://jqueryfordesigners.com/slider-gallery/"><img class="aligncenter size-full wp-image-26099" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Slider-Gallery.png" alt="" width="500" height="160" /></a></p>
<h2>20. <a target="_blank" href="http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/">Ultimate JavaScript Slider and Scroller</a>, <a target="_blank" href="http://sandbox.leigeber.com/contentslider/slider.html">Demo</a></h2>
<p><a target="_blank" href="http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/"><img class="aligncenter size-full wp-image-26100" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Ultimate-JavaScript-Slider-and-Scroller.png" alt="" width="500" height="262" /></a></p>
<h2>21. <a target="_blank" href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider">Easy Slider</a>, <a target="_blank" href="http://cssglobe.com/lab/easyslider1.7/01.html">Demo</a></h2>
<p><a target="_blank" href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider"><img class="aligncenter size-full wp-image-26101" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Easy-Slider.png" alt="" width="500" height="173" /></a></p>
<h2>22. <a target="_blank" href="http://pikachoose.com/">Pikachoose</a>, <a target="_blank" href="http://pikachoose.com/demo/">Demo</a></h2>
<p><a target="_blank" href="http://pikachoose.com/"><img class="aligncenter size-full wp-image-26102" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Pikachoose.png" alt="" width="500" height="431" /></a></p>
<h2>23. <a target="_blank" href="http://www.leigeber.com/2008/12/javascript-slideshow/">Animated JavaScript Slideshow</a>, <a target="_blank" href="http://sandbox.leigeber.com/javascript-slideshow/">Demo</a></h2>
<p><a target="_blank" href="http://www.leigeber.com/2008/12/javascript-slideshow/"><img class="aligncenter size-full wp-image-26103" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Animated-JavaScript-Slideshow.png" alt="" width="500" height="403" /></a></p>
<h2>24. <a target="_blank" href="http://code.google.com/p/agile-carousel/">Agile Carousel</a>, <a target="_blank" href="http://www.agilecarousel.com/examples/multi_example">Demo</a></h2>
<p><a target="_blank" href="http://code.google.com/p/agile-carousel/"><img class="aligncenter size-full wp-image-26104" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Agile-Carousel.png" alt="" width="500" height="172" /></a></p>
<h2>25. <a target="_blank" href="http://www.efectorelativo.net/laboratory/noobSlide/">noobSlide</a></h2>
<p><a target="_blank" href="http://www.efectorelativo.net/laboratory/noobSlide/"><img class="aligncenter size-full wp-image-26105" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/noobSlide.png" alt="" width="500" height="223" /></a></p>
<h2>26. <a target="_blank" href="http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm">SAG Content Scroller</a></h2>
<p><a target="_blank" href="http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm"><img class="aligncenter size-full wp-image-26196" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/SAG-Content-Scroller.png" alt="" width="500" height="288" /></a></p>
<h2>27. <a target="_blank" href="http://www.serie3.info/s3slider/">s3Slider</a>, <a target="_blank" href="http://www.serie3.info/s3slider/demonstration.html">Demo</a></h2>
<p><a target="_blank" href="http://www.serie3.info/s3slider/"><img class="aligncenter size-full wp-image-26197" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/s3Slider.png" alt="" width="500" height="208" /></a></p>
<h2>28. <a target="_blank" href="http://galleria.aino.se/">Galleria</a>, <a target="_blank" href="http://galleria.aino.se/media/galleria/demos/classic-02.html">Demo</a></h2>
<p><a target="_blank" href="http://galleria.aino.se/"><img class="aligncenter size-full wp-image-26199" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Galleria.png" alt="" width="500" height="336" /></a></p>
<h2>29. <a target="_blank" href="http://medienfreunde.com/lab/innerfade/">InnerFade</a></h2>
<p><a target="_blank" href="http://medienfreunde.com/lab/innerfade/"><img class="aligncenter size-full wp-image-26200" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/InnerFade.png" alt="" width="500" height="175" /></a></p>
<h2>30. <a target="_blank" href="http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/">Content Slider with jQuery UI</a>, <a target="_blank" href="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/slider.html">Demo</a></h2>
<p><a target="_blank" href="http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/"><img class="aligncenter size-full wp-image-26201" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Content-Slider-with-jQuery-UI.png" alt="" width="500" height="316" /></a></p>
<h2>31. <a target="_blank" href="http://spaceforaname.com/galleryview">GalleryView</a>, <a target="_blank" href="http://spaceforaname.com/webcomics.html">Demo</a></h2>
<p><a target="_blank" href="http://spaceforaname.com/galleryview"><img class="aligncenter size-full wp-image-26202" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/GalleryView.png" alt="" width="500" height="492" /></a></p>
<h2>32. <a target="_blank" href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-image-slider-slideitmoo/">SlideItMoo</a>, <a target="_blank" href="http://www.php-help.ro/examples/mootools_rotator/">Demo</a></h2>
<p><a target="_blank" href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-image-slider-slideitmoo/"><img class="aligncenter size-full wp-image-26203" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/SlideItMoo.png" alt="" width="500" height="137" /></a></p>
<h2>33. <a target="_blank" href="http://flowplayer.org/tools/scrollable/index.html">jQuery Scrollable</a>, <a target="_blank" href="http://flowplayer.org/tools/demos/scrollable/site-navigation.html">Demo</a></h2>
<p><a target="_blank" href="http://flowplayer.org/tools/scrollable/index.html"><img class="aligncenter size-full wp-image-26204" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jQuery-Scrollable.png" alt="" width="500" height="302" /></a></p>
<h2>34. <a target="_blank" href="http://www.htmldrive.net/items/show/348/Ultimate-JavaScript-Scroller-and-Slider.html">Ultimate JavaScript Scroller and Slider</a>, <a target="_blank" href="http://www.htmldrive.net/items/demo/348/Ultimate-JavaScript-Scroller-and-Slider">Demo</a></h2>
<p><a target="_blank" href="http://www.htmldrive.net/items/show/348/Ultimate-JavaScript-Scroller-and-Slider.html"><img class="aligncenter size-full wp-image-26205" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Ultimate-JavaScript-Scroller-and-Slider.png" alt="" width="500" height="258" /></a></p>
<h2>35. <a target="_blank" href="http://css-tricks.com/moving-boxes/">Moving Boxes</a>, <a target="_blank" href="http://css-tricks.com/examples/MovingBoxes/">Demo</a></h2>
<p><a target="_blank" href="http://css-tricks.com/moving-boxes/"><img class="aligncenter size-full wp-image-26206" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Moving-Boxes.png" alt="" width="500" height="208" /></a></p>
<h2>36. <a target="_blank" href="http://sorgalla.com/projects/jcarousel/.">jCarousel</a>, <a target="_blank" href="http://sorgalla.com/projects/jcarousel/examples/static_multiple.html">Demo</a></h2>
<p><a target="_blank" href="http://sorgalla.com/projects/jcarousel/"><img class="aligncenter size-full wp-image-26207" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/jCarousel.png" alt="" width="347" height="268" /></a></p>
<h2>37. <a target="_blank" href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Slick Auto-Playing Featured Content Slider</a>, <a target="_blank" href="http://css-tricks.com/examples/FeaturedContentSlider/">Demo</a></h2>
<p><a target="_blank" href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/"><img class="aligncenter size-full wp-image-26210" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Slick-Auto-Playing-Featured-Content-Slider.png" alt="" width="495" height="404" /></a></p>
<h2>38. <a target="_blank" href="http://billwscott.com/carousel/">YUI Carousel component</a>, <a target="_blank" href="http://billwscott.com/carousel/two_carousels_ajax_load.html">Demo</a></h2>
<p><a target="_blank" href="http://billwscott.com/carousel/"><img class="aligncenter size-full wp-image-26251" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/YUI-Carousel-component.png" alt="" width="500" height="161" /></a></p>
<h2>39. <a target="_blank" href="http://css-tricks.com/anythingslider-jquery-plugin/">AnythingSlider</a>, <a target="_blank" href="http://css-tricks.com/examples/AnythingSlider/">Demo</a></h2>
<p><a target="_blank" href="http://css-tricks.com/anythingslider-jquery-plugin/"><img class="aligncenter size-full wp-image-26257" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/AnythingSlider.png" alt="" width="500" height="233" /></a></p>
<h2>40. <a target="_blank" href="http://css-tricks.com/startstop-slider/">Start/Stop Slider</a>, <a target="_blank" href="http://css-tricks.com/examples/StartStopSlider/">Demo</a></h2>
<p><a target="_blank" href="http://css-tricks.com/startstop-slider/"><img class="aligncenter size-full wp-image-26258" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Start-Stop-Slider.png" alt="" width="500" height="122" /></a></p>
<h2>41. <a target="_blank" href="http://smoothgallery.jondesign.net/showcase/timed-gallery/">SmoothGallery</a></h2>
<p><a target="_blank" href="http://smoothgallery.jondesign.net/showcase/timed-gallery/"><img class="aligncenter size-full wp-image-26259" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/SmoothGallery.png" alt="" width="471" height="358" /></a></p>
<h2>42. <a target="_blank" href="http://www.electricprism.com/aeron/slideshow/">Slideshow 2</a></h2>
<p><a target="_blank" href="http://www.electricprism.com/aeron/slideshow/"><img class="aligncenter size-full wp-image-26260" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Slideshow-2.png" alt="" width="500" height="473" /></a></p>
<h2>43. <a target="_blank" href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/">iTunes-esque slider with jQuery</a>, <a target="_blank" href="http://nettuts.s3.amazonaws.com/585_slider/demo/code.html">Demo</a></h2>
<p><a target="_blank" href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/"><img class="aligncenter size-full wp-image-26261" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/iTunes-esque-slider-with-jQuery.png" alt="" width="500" height="200" /></a></p>
<h2>44. <a target="_blank" href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick and Accessible Slideshow Using jQuery</a>, <a target="_blank" href="http://sixrevisions.com/demo/slideshow/final.html">Demo</a></h2>
<p><a target="_blank" href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/"><img class="aligncenter size-full wp-image-26263" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/Slick-and-Accessible-Slideshow-Using-jQuery.png" alt="" width="500" height="202" /></a></p>
<h2>45. <a target="_blank" href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/">A Beautiful Apple-style Slideshow Gallery</a>, <a target="_blank" href="http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html">Demo</a></h2>
<p><a target="_blank" href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/"><img class="aligncenter size-full wp-image-26264" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/A-Beautiful-Apple-style-Slideshow-Gallery.png" alt="" width="500" height="245" /></a></p>
<h2>46. <a target="_blank" href="http://tutorialzine.com/2009/10/slick-content-slider-jquery/">A Slick Content Slider</a>, <a target="_blank" href="http://demo.tutorialzine.com/2009/10/slick-content-slider-jquery/demo.php">Demo</a></h2>
<p><a target="_blank" href="http://tutorialzine.com/2009/10/slick-content-slider-jquery/"><img class="aligncenter size-full wp-image-26267" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/09/A-Slick-Content-Slider.png" alt="" width="500" height="132" /></a></p>
<p>请让我们知道我们遗漏了哪些更好的，我们 很乐意及时更新这篇文章</p>
<p>来自：<a href="http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/">1stwebdesigner</a>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/">http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2010年09月22日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/" title="24个高级JQuery特效">24个高级JQuery特效</a></li><li>2010年09月29日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/" title="11个有用的Tab导航解决方案">11个有用的Tab导航解决方案</a></li><li>2009年12月13日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/" title="2009 年度最佳 jQuery 插件（转）">2009 年度最佳 jQuery 插件（转）</a></li><li>2009年11月29日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/" title="用Jquery制作的几款3D效果">用Jquery制作的几款3D效果</a></li><li>2009年11月6日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/" title="1000个JQuery极品插件(连载中&#8230;)">1000个JQuery极品插件(连载中&#8230;)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>24个高级JQuery特效</title>
		<link>http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/</link>
		<comments>http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/#comments</comments>
		<pubDate>Tue, 21 Sep 2010 16:34:03 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[Jquery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>
		<category><![CDATA[Jquery Slider]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=1177</guid>
		<description><![CDATA[每一种新技术都会有一个与竞争对手的比较，就比如Jquery和Flash的比较。flash是多年前许多web设计师使用的技术，但是现在设计师们已经开始转向使用Jquery对某个站点增加特效和互动，相比flash而言，Jquery更加容易创建一个精致的自定义效果和动画效果。并且Jquery在搜索引擎优化方面走在了前面。

Jquery生成了一些非常好的效果，能够在不同的方向上滑动，它能够在相片上加上一些诸如倒装，分类效果，放大以及平移，拍照，幻灯片效果等。接下来我将向你展示一些关于各种效果演示的链接，给你一张清晰的没有任何帮助指导的图片。]]></description>
			<content:encoded><![CDATA[<p>每一种新技术都会有一个与竞争对手的比较，就比如Jquery和Flash的比较。flash是多年前许多web设计师使用的技术，但是现在设计师们已经开始转向使用Jquery对某个站点增加特效和互动，相比flash而言，Jquery更加容易创建一个精致的自定义效果和动画效果。并且Jquery在搜索引擎优化方面走在了前面。</p>
<p>Jquery生成了一些非常好的效果，能够在不同的方向上滑动，它能够在相片上加上一些诸如倒装，分类效果，放大以及平移，拍照，幻灯片效果等。接下来我将向你展示一些关于各种效果演示的链接，给你一张清晰的没有任何帮助指导的图片。</p>
<p>1. <a href="http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html">苹果视网膜效果</a><br />
<a href="http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/apple-like-retina-effect.jpg" alt="apple-like-retina-effect" title="apple-like-retina-effect" width="570" height="400" class="aligncenter size-full wp-image-1178" /></a></p>
<p>2. <a href="http://aviathemes.com/aviaslider/">Aviaslider</a><br />
<a href="http://aviathemes.com/aviaslider/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/aviaslider.jpg" alt="aviaslider" title="aviaslider" width="570" height="400" class="aligncenter size-full wp-image-1179" /></a></p>
<p>3. <a href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation">漂亮的背景图片导航</a><br />
<a href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/BeautifulBackgroundImageNavigation.jpg" alt="BeautifulBackgroundImageNavigation" title="BeautifulBackgroundImageNavigation" width="570" height="400" class="aligncenter size-full wp-image-1180" /></a></p>
<p>4. <a href="http://demo.marcofolio.net/bgimg_slideshow/">背景图片滑动秀</a><br />
<a href="http://demo.marcofolio.net/bgimg_slideshow/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/bgimg_slideshow.jpg" alt="bgimg_slideshow" title="bgimg_slideshow" width="570" height="400" class="aligncenter size-full wp-image-1181" /></a></p>
<p>5. <a href="http://tympanus.net/Tutorials/BubbleNavigation/">泡泡导航</a><br />
<a href="http://tympanus.net/Tutorials/BubbleNavigation/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/BubbleNavigation.jpg" alt="BubbleNavigation" title="BubbleNavigation" width="570" height="400" class="aligncenter size-full wp-image-1182" /></a></p>
<p>6. <a href="http://net.tutsplus.com/javascript-ajax/build-a-top-panel-with-jquery/">高级登录面板</a><br />
<a href="http://net.tutsplus.com/javascript-ajax/build-a-top-panel-with-jquery/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/build-a-top-panel.jpg" alt="build-a-top-panel" title="build-a-top-panel" width="570" height="400" class="aligncenter size-full wp-image-1183" /></a></p>
<p>7. <a href="http://carrotcreative.com/">Carrot creative</a><br />
<a href="http://carrotcreative.com/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/carrotcreative.jpg" alt="carrotcreative" title="carrotcreative" width="570" height="400" class="aligncenter size-full wp-image-1184" /></a></p>
<p>8. <a href="http://css-tricks.com/examples/Circulate/">Circulate</a><br />
<a href="http://css-tricks.com/examples/Circulate/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/Circulate.jpg" alt="Circulate" title="Circulate" width="570" height="400" class="aligncenter size-full wp-image-1185" /></a></p>
<p>9. <a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm">Cloud zoom</a><br />
<a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/cloud-zoo.jpg" alt="cloud-zoo" title="cloud-zoo" width="570" height="400" class="aligncenter size-full wp-image-1186" /></a></p>
<p>10. <a href="http://lab.smashup.it/flip/">Flip box</a><br />
<a href="http://lab.smashup.it/flip/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/flip.jpg" alt="flip" title="flip" width="570" height="400" class="aligncenter size-full wp-image-1187" /></a></p>
<p>11. <a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php">Hovering gallery</a><br />
<a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/hovering-gallery.jpg" alt="hovering-gallery" title="hovering-gallery" width="570" height="400" class="aligncenter size-full wp-image-1188" /></a></p>
<p>12. <a href="http://zendold.lojcomm.com.br/icarousel/example6.asp">icarousel</a><br />
<a href="http://zendold.lojcomm.com.br/icarousel/example6.asp"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/icarousel.jpg" alt="icarousel" title="icarousel" width="570" height="400" class="aligncenter size-full wp-image-1189" /></a></p>
<p>13. <a href="http://imageflow.finnrudolph.de/">Imageflow</a><br />
<a href="http://imageflow.finnrudolph.de/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/imageflow.jpg" alt="imageflow" title="imageflow" width="570" height="400" class="aligncenter size-full wp-image-1190" /></a></p>
<p>14. <a href="http://static.buildinternet.com/live-tutorials/interactive-picture/index.html">交互式图片</a><br />
<a href="http://static.buildinternet.com/live-tutorials/interactive-picture/index.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/interactive-picture.jpg" alt="interactive-picture" title="interactive-picture" width="570" height="400" class="aligncenter size-full wp-image-1191" /></a></p>
<p>15. <a href="http://workshop.rs/projects/jqfancytransitions/">Jqfancy transitions</a><br />
<a href="http://workshop.rs/projects/jqfancytransitions/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/jqfancytransitions.jpg" alt="jqfancytransitions" title="jqfancytransitions" width="570" height="400" class="aligncenter size-full wp-image-1192" /></a></p>
<p>16. <a href="http://www.marcofolio.net/webdesign/jquery_dj_hero_css3_and_jquery_fun.html">Jquery dj hero</a><br />
<a href="http://www.marcofolio.net/webdesign/jquery_dj_hero_css3_and_jquery_fun.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/jquery_dj_hero.jpg" alt="jquery_dj_hero" title="jquery_dj_hero" width="570" height="400" class="aligncenter size-full wp-image-1193" /></a></p>
<p>7. <a href="http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps">可缩放的交互地图插件</a><br />
<a href="http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/a-jquery-plugin-for-zoomable-interactive-maps.jpg" alt="a-jquery-plugin-for-zoomable-interactive-maps" title="a-jquery-plugin-for-zoomable-interactive-maps" width="570" height="400" class="aligncenter size-full wp-image-1194" /></a></p>
<p>18. <a href="http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html">Jslickmenu</a><br />
<a href="http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/jslickmenu.jpg" alt="jslickmenu" title="jslickmenu" width="570" height="400" class="aligncenter size-full wp-image-1195" /></a></p>
<p>19. <a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm">Panning slideshow</a><br />
<a href="http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/panning-slideshow.jpg" alt="panning-slideshow" title="panning-slideshow" width="570" height="400" class="aligncenter size-full wp-image-1196" /></a></p>
<p>20.<a href="http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html">Photo shoot</a><br />
<a href="http://demo.tutorialzine.com/2010/02/photo-shoot-css-jquery/demo.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/photo-shoot.jpg" alt="photo-shoot" title="photo-shoot" width="570" height="400" class="aligncenter size-full wp-image-1197" /></a></p>
<p>21.<a href="http://razorjack.net/quicksand/">Quick sand</a><br />
<a href="http://razorjack.net/quicksand/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/quicksand.jpg" alt="quicksand" title="quicksand" width="570" height="400" class="aligncenter size-full wp-image-1198" /></a></p>
<p>22.<a href="http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html">Slideout context tips</a><br />
<a href="http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/slideout-context-tips.jpg" alt="slideout-context-tips" title="slideout-context-tips" width="570" height="400" class="aligncenter size-full wp-image-1199" /></a></p>
<p>23.<a href="https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm">Sliding boxes</a><br />
<a href="https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/sliding-boxes.jpg" alt="sliding-boxes" title="sliding-boxes" width="570" height="400" class="aligncenter size-full wp-image-1200" /></a></p>
<p>24.<a href="http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/">zoomer gallery</a><br />
<a href="http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/"><img src="http://www.jssay.com/blog/wp-content/uploads/2010/09/zoomer-gallery.jpg" alt="zoomer-gallery" title="zoomer-gallery" width="570" height="400" class="aligncenter size-full wp-image-1201" /></a></p>
<p>英文出处：<a href="http://www.1stwebdesigner.com/resources/advanced-jquery-effects/">1stwebdesigner</a>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/">http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2010年09月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/" title="46个功能强大的Javascript滑动器和滚动条">46个功能强大的Javascript滑动器和滚动条</a></li><li>2010年09月29日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/" title="11个有用的Tab导航解决方案">11个有用的Tab导航解决方案</a></li><li>2009年12月13日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/" title="2009 年度最佳 jQuery 插件（转）">2009 年度最佳 jQuery 插件（转）</a></li><li>2009年11月29日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/" title="用Jquery制作的几款3D效果">用Jquery制作的几款3D效果</a></li><li>2009年11月6日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/" title="1000个JQuery极品插件(连载中&#8230;)">1000个JQuery极品插件(连载中&#8230;)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2009 年度最佳 jQuery 插件（转）</title>
		<link>http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/</link>
		<comments>http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/#comments</comments>
		<pubDate>Sun, 13 Dec 2009 03:23:00 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[WEB前端]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=511</guid>
		<description><![CDATA[jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。 ]]></description>
			<content:encoded><![CDATA[<p>jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 <a href="http://www.webdesignledger.com/">webdesignledger.com</a> 网站推选的2009年度最佳 jQuery 插件。</p>
<p>拉洋片<br />
在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。<br />
<a href="http://css-tricks.com/anythingslider-jquery-plugin/">AnythingSlider</a><br />
<a href="http://css-tricks.com/anythingslider-jquery-plugin/"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_1.jpg" alt="jquery plugins" /></a></p>
<p>由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。<br />
<a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider">Easy Slider</a><br />
<a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_3.jpg" alt="jquery plugins" /></a></p>
<p>这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。<br />
<a href="http://www.ndoherty.biz/tag/coda-slider/">Coda-Slider 2.0</a><br />
<a href="http://www.ndoherty.biz/tag/coda-slider/"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_7.jpg" alt="jquery plugins" /></a></p>
<p>Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。<br />
图片库<br />
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。<br />
<a href="http://devkick.com/lab/galleria/">Galleria</a><br />
<a href="http://devkick.com/lab/galleria/"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_4.jpg" alt="jquery plugins" /></a></p>
<p>这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。<br />
<a href="http://www.catchmyfame.com/2009/08/13/jquery-panel-gallery-1-1-plugin-released/">jQuery Panel Gallery</a><br />
<a href="http://www.catchmyfame.com/2009/08/13/jquery-panel-gallery-1-1-plugin-released/"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_5.jpg" alt="jquery plugins" /></a></p>
<p>一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。<br />
<a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">slideViewer</a><br />
<a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_10.jpg" alt="jquery plugins" /></a></p>
<p>slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。<br />
<a href="http://www.buildinternet.com/project/supersized/">Supersized</a><br />
<a href="http://www.buildinternet.com/project/supersized/"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_6.jpg" alt="jquery plugins" /></a></p>
<p>一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。<br />
导航<br />
我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。<br />
<a href="http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/">jquery mb.menu</a><br />
<a href="http://pupunzi.open-lab.com/mb-jquery-components/mb-_menu/"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_8.jpg" alt="jquery plugins" /></a><br />
<a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial">Horizontal Scroll Menu with jQuery </a><br />
<a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_16.jpg" alt="jquery plugins" /></a><br />
<a href="http://www.newmediacampaigns.com/page/autosprites-jquery-menu-plugin">AutoSprites</a><br />
<a href="http://www.newmediacampaigns.com/page/autosprites-jquery-menu-plugin"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_9.jpg" alt="jquery plugins" /></a><br />
表单和表格<br />
在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。<br />
<a href="http://www.unwrongest.com/projects/password-strength/">Password Strength</a><br />
<a href="http://www.unwrongest.com/projects/password-strength/"><img src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_12.jpg" alt="jquery plugins" /></a></p>
<p>这个插件帮你评估用户输入的密码是否足够强壮。<br />
<a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Ajax Fancy Capcha</a><br />
<a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_13.jpg" alt="jquery plugins" /></a></p>
<p>顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。<br />
<a href="http://www.chromaloop.com/posts/chromatable-jquery-plugin">Chromatable</a><br />
<a href="http://www.chromaloop.com/posts/chromatable-jquery-plugin"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/11/jquery_tables_10.jpg" alt="jquery tables" /></a></p>
<p>这个插件可以帮助你在表格上实现滚动条。<br />
<a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">jqTransform</a><br />
<a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_14.jpg" alt="jquery plugins" /></a></p>
<p>一个式样插件，帮助你对表单中的控件进行式样控制。<br />
<a href="http://www.uploadify.com/">Uploadify</a><br />
<a href="http://www.uploadify.com/"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/12/jquery_2009_15.jpg" alt="jquery plugins" /></a></p>
<p>实现多个文件同时上传。<br />
<a href="http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx">jExpand </a><br />
<a href="http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx"><img style="BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid" src="http://webdesignledger.com/wp-content/uploads/2009/11/jquery_tables_1.jpg" alt="jquery tables" /></a></p>
<p>一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。</p>
<p>本文来源：<a href="http://www.cnbeta.com/articles/99878.htm">http://www.cnbeta.com/articles/99878.htm</a>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/">http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2009年11月29日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/" title="用Jquery制作的几款3D效果">用Jquery制作的几款3D效果</a></li><li>2009年11月6日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/" title="1000个JQuery极品插件(连载中&#8230;)">1000个JQuery极品插件(连载中&#8230;)</a></li><li>2010年10月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/28/20-models-of-the-latest-highly-recommend-jquery-plugin/" title="极力推荐20款最新的jQuery插件">极力推荐20款最新的jQuery插件</a></li><li>2010年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/18/jquery-latest-version-v1-4-3-released/" title="Jquery最新版（V1.4.3）发布">Jquery最新版（V1.4.3）发布</a></li><li>2010年09月29日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/" title="11个有用的Tab导航解决方案">11个有用的Tab导航解决方案</a></li><li>2010年09月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/" title="46个功能强大的Javascript滑动器和滚动条">46个功能强大的Javascript滑动器和滚动条</a></li><li>2010年09月22日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/" title="24个高级JQuery特效">24个高级JQuery特效</a></li><li>2009年12月1日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/01/jquery%e5%ad%a6%e4%b9%a0%e8%b5%84%e6%96%99/" title="JQuery学习资料">JQuery学习资料</a></li><li>2009年11月10日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/10/jqueryextjsyuiprototypedojo%e7%ad%89js%e6%a1%86%e6%9e%b6%e7%9a%84%e5%8c%ba%e5%88%ab%e5%92%8c%e5%ba%94%e7%94%a8/" title="JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用">JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用</a></li><li>2009年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2009/10/18/qq%e5%ae%a2%e6%9c%8d%e5%88%97%e8%a1%a8%e7%9a%84%e5%88%b6%e4%bd%9c/" title="QQ客服列表的制作">QQ客服列表的制作</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用Jquery制作的几款3D效果</title>
		<link>http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/</link>
		<comments>http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/#comments</comments>
		<pubDate>Sun, 29 Nov 2009 07:32:32 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[WEB前端]]></category>
		<category><![CDATA[程序设计]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=473</guid>
		<description><![CDATA[3D Sphere Using jQuery
Creating a Wobbling 3D Carousel
3D Plane for jQuery 3D Engine
Making a 3D Engine in jQuery]]></description>
			<content:encoded><![CDATA[<p><a rel="bookmark" href="http://www.devirtuoso.com/2009/09/3d-sphere-using-jquery/">3D Sphere Using jQuery</a></p>
<div>
<div><a onclick="pageTracker._trackPageview('/downloads/Examples/3D-Engine/sphere.zip');" href="http://www.devirtuoso.com/Examples/3D-Engine/sphere.zip" target="_blank">Download</a> <a href="http://www.devirtuoso.com/Examples/3D-Engine/sphere.html" target="_blank">Example</a></div>
<p><a title="3d sphere" href="http://www.devirtuoso.com/Examples/3D-Engine/sphere.html" target="_blank"><img style="display: inline; maxwidth: 600px; border-width: 0px;" title="sphere" src="http://www.devirtuoso.com/wp-content/uploads/2009/09/image38.png" border="0" alt="sphere" width="419" height="420" /></a> </div>
<div><a onclick="pageTracker._trackPageview('/downloads/Examples/3D-Engine/sphere.zip');" href="http://www.devirtuoso.com/Examples/3D-Engine/sphere.zip" target="_blank">Download</a> <a href="http://www.devirtuoso.com/Examples/3D-Engine/sphere.html" target="_blank">Example</a></div>
<p>Ever wanted your tag cloud to resemble a ball?  Of course you did.  This tutorial will walk you through how to create a Sphere in jQuery.</p>
<p><a rel="bookmark" href="http://www.devirtuoso.com/2009/09/creating-a-wobbling-3d-carousel/">Creating a Wobbling 3D Carousel</a></p>
<div><a onclick="pageTracker._trackPageview('/downloads/Examples/3D-Engine/ring.zip');" href="http://www.devirtuoso.com/Examples/3D-Engine/ring.zip" target="_blank">Download</a> <a href="http://www.devirtuoso.com/Examples/3D-Engine/ring.html" target="_blank">Example</a></div>
<p><a href="http://www.devirtuoso.com/Examples/3D-Engine/ring.html" target="_blank"><img style="BORDER-TOP-WIDTH: 0px; DISPLAY: inline; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; maxWidth: 600px" title="carousel" src="http://www.devirtuoso.com/wp-content/uploads/2009/09/image37.png" border="0" alt="carousel" width="445" height="146" /></a></p>
<div>
<p>We’ve all seen a carousel in one form or another.  This post will show how to create a carousel with a wobbling effect, much like an unbalanced wheel.</p>
<p><a rel="bookmark" href="http://www.devirtuoso.com/2009/09/3d-plane-for-jquery-3d-engine/">3D Plane for jQuery 3D Engine</a></p>
<div>
<div><a onclick="pageTracker._trackPageview('/downloads/Examples/3D-Engine/plane.zip');" href="http://www.devirtuoso.com/Examples/3D-Engine/plane.zip" target="_blank">Download</a> <a href="http://www.devirtuoso.com/Examples/3D-Engine/plane.html" target="_blank">Example</a></div>
<p> </p>
<p><a title="Plane 3D" href="http://www.devirtuoso.com/Examples/3D-Engine/plane.html" target="_blank"><img style="display: inline; maxwidth: 600px; border-width: 0px;" title="plane rotating" src="http://www.devirtuoso.com/wp-content/uploads/2009/09/image33.png" border="0" alt="plane rotating" width="370" height="370" /></a></p>
<p> </p></div>
<p>In the last post we created a <a title="3D Engine with jQuery" href="http://www.devirtuoso.com/2009/09/making-a-3d-engine-in-jquery/" target="_blank">3D Engine with jQuery</a>.  This time around we’re going to make a new shape and make it interact with the mouse.</p>
<p><a rel="bookmark" href="http://www.devirtuoso.com/2009/09/making-a-3d-engine-in-jquery/">Making a 3D Engine in jQuery</a></p>
<div>
<div><a onclick="pageTracker._trackPageview('/downloads/Examples/3D-Engine/example.zip');" href="http://www.devirtuoso.com/Examples/3D-Engine/example.zip" target="_blank">Download</a> <a href="http://www.devirtuoso.com/Examples/3D-Engine/" target="_blank">Example</a></div>
<p> <a href="http://www.devirtuoso.com/Examples/3D-Engine/" target="_blank"><img style="display: inline; maxwidth: 600px; border-width: 0px;" title="Cube" src="http://www.devirtuoso.com/wp-content/uploads/2009/09/image_thumb1.png" border="0" alt="cube 3d" width="431" height="449" /></a></div>
<p>In the previous post “<a href="http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/" target="_blank">3D tag cloud</a>” I received quite a few requests for different shapes besides the ring.<br />
The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So<br />
this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes.</p>
<p> </p></div>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/">http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2009年12月13日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/" title="2009 年度最佳 jQuery 插件（转）">2009 年度最佳 jQuery 插件（转）</a></li><li>2009年11月6日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/" title="1000个JQuery极品插件(连载中&#8230;)">1000个JQuery极品插件(连载中&#8230;)</a></li><li>2010年10月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/28/20-models-of-the-latest-highly-recommend-jquery-plugin/" title="极力推荐20款最新的jQuery插件">极力推荐20款最新的jQuery插件</a></li><li>2010年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/18/jquery-latest-version-v1-4-3-released/" title="Jquery最新版（V1.4.3）发布">Jquery最新版（V1.4.3）发布</a></li><li>2010年09月29日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/" title="11个有用的Tab导航解决方案">11个有用的Tab导航解决方案</a></li><li>2010年09月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/" title="46个功能强大的Javascript滑动器和滚动条">46个功能强大的Javascript滑动器和滚动条</a></li><li>2010年09月22日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/" title="24个高级JQuery特效">24个高级JQuery特效</a></li><li>2009年12月1日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/01/jquery%e5%ad%a6%e4%b9%a0%e8%b5%84%e6%96%99/" title="JQuery学习资料">JQuery学习资料</a></li><li>2009年11月10日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/10/jqueryextjsyuiprototypedojo%e7%ad%89js%e6%a1%86%e6%9e%b6%e7%9a%84%e5%8c%ba%e5%88%ab%e5%92%8c%e5%ba%94%e7%94%a8/" title="JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用">JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用</a></li><li>2009年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2009/10/18/qq%e5%ae%a2%e6%9c%8d%e5%88%97%e8%a1%a8%e7%9a%84%e5%88%b6%e4%bd%9c/" title="QQ客服列表的制作">QQ客服列表的制作</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>1000个JQuery极品插件(连载中&#8230;)</title>
		<link>http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/</link>
		<comments>http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 08:08:11 +0000</pubDate>
		<dc:creator>jssay</dc:creator>
				<category><![CDATA[WEB前端]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JQuery Plugin]]></category>

		<guid isPermaLink="false">http://www.jssay.com/blog/?p=407</guid>
		<description><![CDATA[花N长时间积累的Jquery插件，希望大家喜欢。大家还有什么新的插件，请留言，我们一并收录。

感谢大家的支持。 
]]></description>
			<content:encoded><![CDATA[<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000"><img src="http://www.cnblogs.com/Emoticons/qface/055243803.gif" alt="" /></span></span><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff">accordion类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p><span style="FONT-SIZE: 18pt"><span style="FONT-SIZE: 14pt"><span style="COLOR: #3366ff"><span style="FONT-SIZE: 18pt"><span style="FONT-SIZE: 14pt">基于jQuery<span onclick="tagshow(event)">开发，非常简单的水平方向折叠控件。</span><br />
</span></span><img src="http://www.open-open.com/ajax/pimage/102807.jpg" border="0" alt="" /></p>
<p></span></span></span><a href="http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html" target="_blank">Horizontal accordion: jQuery</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<span style="FONT-SIZE: 14pt"><span style="COLOR: #3366ff"><span style="FONT-SIZE: 14pt"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery-Horizontal Accordion</span> </span></span></p>
<p>具有XBOX360 blade界面风格的水平方向Accordion。<br />
<img src="http://www.open-open.com/ajax/pimage/Query_Horizontal_Accordion.jpg" border="0" alt="" /></p>
<p><a href="http://dev.portalzine.de/index?/Horizontal_Accordion--print" target="_blank">jQuery-Horizontal Accordion</a><br />
<span style="FONT-SIZE: 14pt; COLOR: #3366ff">jQuery plugin: Accordion </span><br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于创建 折叠菜单的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/JAccordion.jpg" border="0" alt="" /></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/" target="_blank">jQuery plugin: Accordion</a><br />
<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Accordion Menu script<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的可折叠菜单。<br />
<img src="http://www.open-open.com/ajax/pimage/Accordion_Content_Menu-scri.jpg" border="0" alt="" /></p>
<p><a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm" target="_blank">Accordion Menu script</a><br />
<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.combobox<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery.combobox是一个采用jQuery开发的combobox控件，可以使用CSS控制该combobox的外观，可以设置各种不同风格的下拉动画效果。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.combobox.jpg" border="0" alt="" /></p>
<p><a href="http://jquery.sanchezsalvador.com/" target="_blank">jQuery.combobox</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000"><img src="http://www.cnblogs.com/Emoticons/qface/055243803.gif" alt="" /></span></span><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff">autocomplate类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p>jQuery插件易于集成到现在的表单中(Form)。<br />
<img src="http://www.open-open.com/ajax/pimage/jq_auto_script.jpg" border="0" alt="" /></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/" target="_blank"><span style="color: #002c99;">AutoComplete-JQuery</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> Facebook like Autocomplete</p>
<p>基于jQuery开发，类似于FaceBoox提供的AutoCompleter。<br />
<img src="http://www.open-open.com/ajax/pimage/facebook_searchengine.png" border="0" alt="" /></p>
<p><a href="http://web2ajax.fr/examples/facebook_searchengine/" target="_blank"><span style="color: #002c99;">Facebook like Autocomplete</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> jQuery Autocomplete Mod</p>
<p>jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。<br />
<img src="http://www.open-open.com/ajax/pimage/9jan0800.jpg" border="0" alt="" /></p>
<p><a href="http://www.pengoworks.com/workshop/jquery/autocomplete.htm" target="_blank"><span style="color: #002c99;">jQuery Autocomplete Mod</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> jqac</p>
<p>基于Jquery开发的Autocomplete插件。具有易于使用，配置简单，既可以利用Ajax读取<span onclick="tagshow(event)">数据</span>也可以直接从本地获取数据。<br />
<img src="http://www.open-open.com/ajax/pimage/jqac_snapshot.png" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/jqac/" target="_blank"><span style="color: #002c99;">jqac</span></a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> jQuery Tag Suggestion</p>
<p>类似于del.icio.us提供的tag suggesting功能。<span style="font-family: Courier New;"><br />
<img src="http://www.open-open.com/ajax/pimage/2jan0808.jpg" border="0" alt="" /></span></p>
<p><a href="http://remysharp.com/2007/12/28/jquery-tag-suggestion/" target="_blank"><span style="color: #002c99;">jQuery Tag Suggestion</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> Autocomplete-jQuery ajax</p>
<p>利用 jQuery(Ajax)，<span onclick="tagshow(event)">PHP</span>和My<span onclick="tagshow(event)">SQL</span>开发的AutoCompleter。<br />
<img src="http://www.open-open.com/ajax/pimage/AutoComplete_1.png" border="0" alt="" width="250" height="148" /></p>
<p><a href="http://nodstrum.com/2007/09/19/autocompleter/" target="_blank"><span style="color: #002c99;">Autocomplete-jQuery ajax</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> jQuery.Suggest</p>
<p>跨浏览器支持，基于jQuery开发的Autocomplete library。<br />
<img src="http://www.open-open.com/ajax/pimage/092300.jpg" border="0" alt="" /></p>
<p><a href="http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/" target="_blank"><span style="color: #002c99;">jQuery.Suggest</span></a></p>
<p><span style="color: #002c99;"><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /></span> Autocomplete- jQuery plugin</p>
<p>一个jQuery Autocompleter，提供缓存选项来限制对<span onclick="tagshow(event)">服务器</span>的请求。<br />
<img src="http://www.open-open.com/ajax/pimage/072902.jpg" border="0" alt="" /></p>
<p><a href="http://www.dyve.net/jquery/?autocomplete" target="_blank"><span style="color: #002c99;">Autocomplete- jQuery plugin</span></a></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery plugin: Autocomplete<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
自动完成输入框值让用户能够快速查找和过滤某些值。<br />
<img src="http://www.open-open.com/ajax/pimage/Autocomplete.jpg" border="0" alt="" /></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/" target="_blank">jQuery plugin: Autocomplete</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jSuggest<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
模仿Google Suggest功能的AutoComplete jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/test.gif" border="0" alt="" /></p>
<p><a href="http://www.gimiti.com/kltan/wordpress/?p=40" target="_blank">jSuggest</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Live Ajax Search Plug-in<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义，内容展示是一个HTML页面。<br />
<img src="http://www.open-open.com/ajax/pimage/Ajax_jquery.jpg" border="0" alt="" /></p>
<p><a href="http://exscale.se/archives/2008/05/16/jquery-live-ajax-search-plug-in/" target="_blank">jQuery Live Ajax Search Plug-in</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> ddcombobox<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
带AutoComplete功能的下拉选择框jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/ddcombobox.jpg" border="0" alt="" /></p>
<p><a href="http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox" target="_blank">ddcombobox</a></p>
<p>  <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />分页类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span><br />
 </p>
<p> <img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Pagination</p>
<p>jQuery分页插件<br />
<img src="http://www.open-open.com/ajax/pimage/Pagination.jpg" border="0" alt="" /></p>
<p><a href="http://plugins.jquery.com/project/pagination" target="_blank">jQuery Pagination</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> pager jQuery plug-in<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery分页插件。<br />
<img src="http://www.open-open.com/ajax/pimage/pager_jQuery_plug-in.jpg" border="0" alt="" /></p>
<p><a href="http://rikrikrik.com/jquery/pager/" target="_blank">pager jQuery plug-in</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> JQuery Pager<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个利用jQuery开发的分页UI控件，可用于数据驱动的web应用程序中。<br />
<img src="http://www.open-open.com/ajax/pimage/JQuery_Pager.jpg" border="0" alt="" /></p>
<p><a href="http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html" target="_blank">JQuery Pager</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />提示框弹窗类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Facebox</p>
<p>Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程<span onclick="tagshow(event)">页面</span>。<br />
<img src="http://www.open-open.com/ajax/pimage/Facebox2.jpg" border="0" alt="" /></p>
<p><a href="http://famspam.com/facebox" target="_blank">Facebox</a><br />
SimpleModal</p>
<p>SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。<br />
<img src="http://www.open-open.com/ajax/pimage/SimpleModal.jpg" border="0" alt="" /></p>
<p><a href="http://www.ericmmartin.com/projects/simplemodal" target="_blank">SimpleModal</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jTip<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。<br />
<img src="http://www.open-open.com/ajax/pimage/tooltips_05.jpg" border="0" alt="" /></p>
<p><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip" target="_blank">jTip</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> BetterTip<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。<br />
<img src="http://www.open-open.com/ajax/pimage/090901.jpg" border="0" alt="" /></p>
<p><a href="http://edgarverle.com/BetterTip/default.cfm" target="_blank">BetterTip</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> clueTip<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。<br />
<img src="http://www.open-open.com/ajax/pimage/clueTip.jpg" border="0" alt="" width="400" height="218" /></p>
<p><a href="http://plugins.jquery.com/project/cluetip" target="_blank">clueTip</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery lightBox plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个简单，强大基于jQuery开发的lightBox控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_lightBox_plugin.jpg" border="0" alt="" /></p>
<p><a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">jQuery lightBox plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Impromptu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Impromptu.jpg" border="0" alt="" /></p>
<p><a href="http://trentrichardson.com/Impromptu/" target="_blank">jQuery Impromptu</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.UI Messenger&#8221;Outlook like message notification Widget<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery.UI控件类似于Messenger&#8221;Outlook消息弹出提醒框。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.UI.Messenger.jpg" border="0" alt="" /></p>
<p><a href="http://mosesofegypt.net/post/2008/07/17/jQueryui-Messenger-Outlook-like-message-notification-Widget.aspx" target="_blank">jQuery.UI Messenger&#8221;Outlook like message notification Widget</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> FancyBox<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容， 通过CSS自定义外观。<br />
<img src="http://www.open-open.com/ajax/pimage/FancyBox.jpg" border="0" alt="" /></p>
<p><a href="http://fancy.klade.lv/" target="_blank">FancyBox</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Coda Popup Bubbles<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery开发，类似“冒泡”效果的提醒弹出框。<br />
<img src="http://www.open-open.com/ajax/pimage/Coda_Popup_Bubbles.jpg" border="0" alt="" /></p>
<p><a href="http://jqueryfordesigners.com/coda-popup-bubbles/" target="_blank">Coda Popup Bubbles</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jGrowl<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac　OSX系统中Growl事件通知框架。<br />
<img src="http://www.open-open.com/ajax/pimage/jGrowl.jpg" border="0" alt="" /></p>
<p><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">j</a><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">Grow</a><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">l</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jqWindowsEngine<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够帮助你轻松创建Ajax Windows。<br />
<img src="http://www.open-open.com/ajax/pimage/jqWindowsEngine.jpg" border="0" alt="" /></p>
<p><a href="http://www.socialembedded.com/labs/jQuery-Windows-Engine-Plugin/jQuery-Windows-Engine-Plugin.html" target="_blank">jqWindowsEngine</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Alert Dialogs<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs1.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs2.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs3.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs4.jpg" border="0" alt="" /></p>
<p><a href="http://abeautifulsite.net/notebook/87" target="_blank">jQuery Alert Dialogs</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> BeautyTips<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
BeautyTips是一个jQuery Tooltip插件.<br />
<img src="http://www.open-open.com/ajax/pimage/diwd-schedule-2.jpg" border="0" alt="" /></p>
<p><a href="http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin" target="_blank">BeautyTips</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p> </p>
<ol>
<li>Facebook/Xiaonei 风格模态框
<p>效果图:<br />
<img src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-10_233118.png" border="0" alt="" width="489" height="209" /><br />
简介:<br />
使用 div, table 和 opacity 效果实现模态框效果&#8230;<br />
导航:<br />
<a href="http://www.cnblogs.com/fromearth/archive/2009/05/10/1453842.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/jmodal/jmodal.htm" target="_blank">在线演示</a></li>
</ol>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书网：www.hotbook.cn</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />编辑器类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jwysiwyg</p>
<p>WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。<br />
<img src="http://www.open-open.com/ajax/pimage/wysiwyg.jpg" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/jwysiwyg/" target="_blank">jwysiwyg</a></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Damn Small Rich Text Editor</p>
<p>基于jQuery开发，能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。<br />
<img src="http://www.open-open.com/ajax/pimage/Damn.jpg" border="0" alt="" /></p>
<p><a href="http://www.avidansoft.com/dsrte/index.php" target="_blank">Damn Small Rich Text Editor</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />表格类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Flexigrid</p>
<p>Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。<br />
<img src="http://www.open-open.com/ajax/pimage/Flexigrid.jpg" border="0" alt="" /></p>
<p><a href="http://webplicity.net/flexigrid/" target="_blank">Flexigrid</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Ingrid<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery DataGrid提供的功能有：可以拖动调整列宽，分页，排序，设置行/列样式等。<br />
<img src="http://www.open-open.com/ajax/pimage/Ingrid.jpg" border="0" alt="" /></p>
<p><a href="http://www.reconstrukt.com/ingrid/" target="_blank">Ingrid</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Grid<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能，添加、编辑、删除和搜索表中记录，支持多种数据类型输入：XML，JSON，Array等，多行选择，支持子表格，集成日期选择控件等等。</p>
<p><a href="http://trirand.com/jqgrid/jqgrid.html" target="_blank">Demo</a></p>
<p><img src="http://www.open-open.com/ajax/pimage/jqGrid.jpg" border="0" alt="" /></p>
<p><a href="http://www.trirand.com/blog/" target="_blank">jQuery Grid</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> tableHover<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
tableHover一个jQuery插件当鼠标经过时，能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。<br />
<img src="http://www.open-open.com/ajax/pimage/tableHover.jpg" border="0" alt="" /></p>
<p><a href="http://p.sohei.org/jquery-plugins/tablehover/" target="_blank">tableHover</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> JQuery.Resizer<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。</p>
<p><a href="http://os.arandomurl.com/jquerytableresizer/" target="_blank">JQuery.Resizer</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> tablesorter<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序，支持二级隐藏排序，支持多种浏览器：IE6.0+、FF2+、Safari2.0+、Opera9.0+。<br />
<img src="http://www.open-open.com/ajax/pimage/tablesorter.jpg" border="0" alt="" /></p>
<p><a href="http://tablesorter.com/" target="_blank">tablesorter</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> csv2table<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
csv2table这个插件能够将CVS文件（利用Excel创建）的内容转换成HTML Table。</p>
<p>jQuery表格排序插件，点击表格中对应列的头部单元，表格立即重新排序。</p>
<p><a href="http://tablesorter.com/docs/" target="_blank">Tablesorter</a> | <a href="http://tablesorter.com/docs/#Demo" target="_blank">Demo</a></p>
<p><a href="http://plugins.jquery.com/project/csv2table" target="_blank">csv2table</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> tableFormSynch<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括：基于表单中的数据，新增行。删除所选择行，并清除表单中的所有数据。 tableFormSynch支持所有表单控件包括：checkboxes、radio、buttons 与&lt;select&gt;。<br />
<img src="http://www.open-open.com/ajax/pimage/tableFormSynch.jpg" border="0" alt="" /></p>
<p><a href="http://www.swartzfager.org/blog/jQuery/plugins/tableFormSynch/" target="_blank">tableFormSynch</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />色彩选择器类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Farbtastic</p>
<p>Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。<br />
<img src="http://www.open-open.com/ajax/pimage/Farbtastic.jpg" border="0" alt="" /></p>
<p><a href="http://acko.net/dev/farbtastic" target="_blank">Farbtastic</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Color Picker<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Color_Picker.jpg" border="0" alt="" /></p>
<p><a href="http://eyecon.ro/colorpicker/" target="_blank">jQuery Color Picker</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> iColorPicker<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。<br />
<img src="http://www.open-open.com/ajax/pimage/colorpicker.gif" border="0" alt="" /></p>
<p><a href="http://www.supersite.me/website-building/jquery-free-color-picker/" target="_blank">iColorPicker</a></p>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />右键菜单类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> ContextMenu</p>
<p>用于创建右键弹出菜单的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/ContextMenu.jpg" border="0" alt="" /></p>
<p><a href="http://www.trendskitchens.co.nz/jquery/contextmenu/" target="_blank">ContextMenu</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />图片新闻flash展示类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> imgAreaSelect<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。<br />
<img src="http://www.open-open.com/ajax/pimage/imgAreaSelect.jpg" border="0" alt="" /></p>
<p><a href="http://odyniec.net/projects/imgareaselect/" target="_blank">imgAreaSelect</a></p>
<p> <img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Easy Slide<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。<br />
<img src="http://www.open-open.com/ajax/pimage/Easy-Slide.jpg" border="0" alt="" width="400" height="326" /></p>
<p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy Slide</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Easy News<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件，可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果，调整显示速度，可自行修改CSS改变您为喜欢的风格。<br />
<img src="http://www.open-open.com/ajax/pimage/Easy-News.jpg" border="0" alt="" /></p>
<p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy News</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Easy News Plus<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Easy News Plus是基于Easy News开发，滚动式新闻或图文内容展示的jQuery插件，但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。</p>
<p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy News Plus</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQZoom<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的图片放大镜插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQZoom.jpg" border="0" alt="" /></p>
<p><a href="http://www.mind-projects.it/blog/jqzoom_v10" target="_blank">jQZoom</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Plugin: Text Highlight<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
利用javascript对页面中的关键字进行着色的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/092302.jpg" border="0" alt="" /></p>
<p><a href="http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html" target="_blank">jQuery Plugin: Text Highlight</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jCarousel Lite<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。<br />
<img src="http://www.open-open.com/ajax/pimage/jCarousel_Lite.jpg" border="0" alt="" /></p>
<p><a href="http://www.gmarwaha.com/jquery/jcarousellite/index.php" target="_blank">jCarousel Lite</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jCarousel<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。<br />
<img src="http://www.open-open.com/ajax/pimage/jCarousel.jpg" border="0" alt="" /></p>
<p><a href="http://sorgalla.com/projects/jcarousel/" target="_blank">jCarousel</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Spacegallery-Jquery<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个采用jQuery开发，类似于Flash效果的图库（image gallery）。<br />
<img src="http://www.open-open.com/ajax/pimage/Spacegallery-Jquery.jpg" border="0" alt="" /></p>
<p><a href="http://eyecon.ro/spacegallery/" target="_blank">Spacegallery-Jquery</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Slider Gallery<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Slider_Gallery.jpg" border="0" alt="" /></p>
<p><a href="http://jqueryfordesigners.com/slider-gallery/" target="_blank">jQuery Slider Gallery</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Cycle Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Cycle_Plugin.jpg" border="0" alt="" /></p>
<p><a href="http://www.malsup.com/jquery/cycle/" target="_blank">jQuery Cycle Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Zoomimage<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
该jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。<br />
<img src="http://www.open-open.com/ajax/pimage/Zoomimage.jpg" border="0" alt="" /></p>
<p><a href="http://eyecon.ro/zoomimage/" target="_blank">Zoomimage</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> prettyPhoto<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。<br />
<img src="http://www.open-open.com/ajax/pimage/prettyPhoto.jpg" border="0" alt="" /></p>
<p><a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" target="_blank">prettyPhoto</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> ThickBox<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
ThickBox是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。<br />
<img src="http://www.open-open.com/ajax/pimage/ThickBox.jpg" border="0" alt="" /></p>
<p><a href="http://jquery.com/demo/thickbox/" target="_blank">ThickBox</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Galleria<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。<br />
<img src="http://www.open-open.com/ajax/pimage/galleria.jpg" border="0" alt="" /></p>
<p><a href="http://devkick.com/lab/galleria/" target="_blank">Galleria</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Flash Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个jQuery插件用于在页面中嵌入Flash影片。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Flash_Plugin.jpg" border="0" alt="" /></p>
<p><a href="http://jquery.lukelutman.com/plugins/flash/" target="_blank">jQuery Flash Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.SerialScroll<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.SerialScroll.jpg" border="0" alt="" /></p>
<p><a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html" target="_blank">jQuery.SerialScroll</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> InnerFade<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
InnerFade这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。<br />
<img src="http://www.open-open.com/ajax/pimage/InnerFade.jpg" border="0" alt="" /></p>
<p><a href="http://medienfreunde.com/lab/innerfade/" target="_blank">InnerFade</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> NyroModal<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。<br />
<img src="http://www.open-open.com/ajax/pimage/NyroModal.jpg" border="0" alt="" /></p>
<p><a href="http://nyromodal.nyrodev.com/" target="_blank">NyroModal</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> CrossSlide<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入&#8221;滑出等。<br />
<img src="http://www.open-open.com/ajax/pimage/CrossSlide.jpg" border="0" alt="" /></p>
<p><a href="http://www.gruppo4.com/~tobia/cross-slide.shtml" target="_blank">CrossSlide</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Magnify<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Magnify是一个能够在图片上添加放大镜功能的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/Magnify.jpg" border="0" alt="" /></p>
<p><a href="http://www.jnathanson.com/index.cfm?page=pages/jquery/magnify/magnify" target="_blank">Magnify</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Img Notes<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于当鼠标移到图片是时，显示一个信息提示框。<br />
<img src="http://www.open-open.com/ajax/pimage/Img-Notes.jpg" border="0" alt="" /></p>
<p><a href="http://www.sanisoft.com/blog/2008/05/26/img-notes-jquery-plugin/" target="_blank">Img Notes</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> FancyZoom<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。<br />
<img src="http://www.open-open.com/ajax/pimage/iphoto_zoom.jpg" border="0" alt="" /></p>
<p><a href="http://www.cabel.name/2008/02/fancyzoom-10.html" target="_blank">FancyZoom</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Jcrop<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Jcrop 是一个跨浏览器的jQuery图片剪切插件（<strong>jQuery image crop plugin</strong>）。支持对剪切框加CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。<br />
<img src="http://www.open-open.com/ajax/pimage/jquery-image-crop-plugin.jpg" border="0" alt="" /></p>
<p><a href="http://deepliquid.com/content/Jcrop.html" target="_blank">Jcrop</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Galleriffic<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。<br />
<img src="http://www.open-open.com/ajax/pimage/jquery-gallery-plugin.jpg" border="0" alt="" /></p>
<p><a href="http://www.twospy.com/galleriffic/" target="_blank">Galleriffic</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Image Upload and Auto Crop<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用PHP+jQuery开发的图片上传和剪切（Crop）工具。<br />
<img src="http://www.open-open.com/ajax/pimage/Image_Upload_and_Auto_Crop.jpg" border="0" alt="" /></p>
<p><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/" target="_blank">Image Upload and Auto Crop</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> prettyGallery<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。<br />
<img src="http://www.open-open.com/ajax/pimage/prettyGallery.jpg" border="0" alt="" /></p>
<p><a href="http://www.no-margin-for-errors.com/projects/prettyGallery/" target="_blank">prettyGallery</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.popeye<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.popeye.jpg" border="0" alt="" /></p>
<p><a href="http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/" target="_blank">jQuery.popeye</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> s3Slider<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
s3Slider 是一个jQuery slideshow插件，效果类似于<a href="http://smoothslideshow.jondesign.net/timed.html" target="_blank">smooth slideshow</a>。</p>
<p>可以在图片上的任意位置，透明显示当前所放映图片的说明信息。<br />
<img src="http://www.open-open.com/ajax/pimage/s3Slider.jpg" border="0" alt="" /></p>
<p><a href="http://www.serie3.info/s3slider/" target="_blank">s3Slider</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Pirobox<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。<br />
<img src="http://www.open-open.com/ajax/pimage/Pirobox.jpg" border="0" alt="" /></p>
<p><a href="http://designshack.co.uk/tutorials/pirobox-jquery-lightbox" target="_blank">Pirobox</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Simple Controls Gallery<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_slideshow.jpg" border="0" alt="" /></p>
<p><a href="http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm" target="_blank">Simple Controls Gallery</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Agile Carousel<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。<br />
<img src="http://www.open-open.com/ajax/pimage/Agile_Carousel.jpg" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/agile-carousel/" target="_blank">Agile Carousel</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Plugin-Page Peel<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/PagePeel1.jpg" border="0" alt="" /></p>
<p><a href="http://smple.com/2008/12/15/jquery-plugin-page-peel/" target="_blank">jQuery Plugin-Page Peel</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Easy Slider<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。<br />
<img src="http://www.open-open.com/ajax/pimage/Easy_Slider.jpg" border="0" alt="" /></p>
<p><a href="http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider" target="_blank">Easy Slider</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> imgPreview<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。<br />
<img src="http://www.open-open.com/ajax/pimage/imgPreview.jpg" border="0" alt="" /></p>
<p><a href="http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/" target="_blank">imgPreview</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Jquery Fade In.Fade Out<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个用于让图片产生淡入淡出效果的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jquery_fade_big.jpg" border="0" alt="" /></p>
<p><a href="http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank">Jquery Fade In.Fade Out</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Captify<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。<br />
<img src="http://www.open-open.com/ajax/pimage/Captify.jpg" border="0" alt="" /></p>
<p><a href="http://masterfidgeter.com/projects/captify/" target="_blank">Captify</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jParallax<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个用于生成视差现象的jQuery插件。<a href="http://www.piksite.com/mParallax/" target="_blank">mParallax</a>能够产生的效果与jParallax一样但采用Mootools框架开发。<br />
<img src="http://www.open-open.com/ajax/pimage/jparallax-jquery.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/mParallax.jpg" border="0" alt="" /></p>
<p><a href="http://webdev.stephband.info/parallax.html" target="_blank">jParallax</a></p>
<p>jQuery&#8212;运用图片预加载技术打造幻灯片</p>
<p>截图：<br />
<a title="http://www.cssrain.cn" rel="lightbox" href="http://www.cssrain.cn/attachments/month_0904/i2009420234622.jpg" target="_blank"><img src="http://www.cssrain.cn/attachments/month_0904/i2009420234622.jpg" border="0" alt="" /></a></p>
<p><a title="http://www.cssrain.cn" rel="lightbox" href="http://www.cssrain.cn/attachments/month_0904/j200942023467.jpg" target="_blank"><img src="http://www.cssrain.cn/attachments/month_0904/j200942023467.jpg" border="0" alt="" /></a></p>
<p>一些演示：<br />
<a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html</a></p>
<p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html</a><br />
<a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html</a></p>
<p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html</a> (以前做的，非预加载)</p>
<p>下载：<br />
<a href="http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar</a></p>
<p><span style="text-decoration: underline;"><span style="color: #800080;">jQuery pageSlide</span></span></p>
<p align="center"><span style="text-decoration: underline;"><span style="color: #800080;"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/2225415Vj.jpg" alt="11种控制内容展示的JavaScript特效" width="430" height="120" /></span></span></p>
<p>jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。</p>
<p>这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。</p>
<p><span style="text-decoration: underline;"><span style="color: #800080;">Creating a Slick Auto-Playing Featured Content Slider</span></span></p>
<p align="center"><span style="text-decoration: underline;"><span style="color: #800080;"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/222544N5F.jpg" alt="11种控制内容展示的JavaScript特效" width="430" height="283" /></span></span></p>
<p>Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ，实现我们常说的”图片焦点特效”。多用于门户站。</p>
<p><span style="text-decoration: underline;"><span style="color: #800080;">Portfolio Layout Idea Using jQuery</span></span></p>
<p align="center"><span style="text-decoration: underline;"><span style="color: #800080;"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/222543kgz.jpg" alt="11种控制内容展示的JavaScript特效" width="430" height="277" /></span></span></p>
<p>非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。</p>
<p>它在页面两边显示带缩略的作品列表，当你点击每个条目时，会在中间部分以退场然后进场的特效呈现出该作品的全部内容。</p>
<p>jQuery&#8212;图片先模糊后清楚<br />
<a href="http://www.hotbook.cn/">http://www.hotbook.cn/</a></p>
<p> </p>
<p>很多图片网站用了这种技术，Google图片中心也不例外。<br />
这种技术的图片是先显示模糊的，然后再显示清楚的。</p>
<p>这个模糊的原理就是 一张小图片，然后把尺寸放大，大小等于大图片的宽度和高度。<br />
小图片被拉大了，理所当然就模糊了。</p>
<p>试想：小图片的尺寸是10kb,大图片的大小是500kb，那么加载小图片的速度就是大图片的50倍。<br />
当然你会说，如果直接显示大图片是什么情况呢？答案是：一片空白等着你。</p>
<p>演示：<br />
<a href="http://www.cssrain.cn/demo/loadImages/loadimages.html">http://www.cssrain.cn/demo/loadImages/loadimages.html</a></p>
<p> 使用jQuery实现网页报纸</p>
<p>演示：<br />
<a href="http://www.cssrain.cn/demo/jquerynewspager/demo.html">http://www.cssrain.cn/demo/jquerynewspager/demo.html</a></p>
<p>原理：使用报纸内容作为 背景图，相对定位。<br />
然后里面的div设置为绝对定位，大小，left和top都要跟背景图匹配。<br />
所以这个有一定的规律。</p>
<p>下载：<br />
<a href="http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar">http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar</a></p>
<p>引申：<br />
当后台人员问，每次要传坐标，宽度和高度不麻烦么？用户知道使用么？<br />
教用户使用photoshop？。。。！！！<br />
解决方案：<br />
使用图片截图的插件即可，一般的截图插件都能获取4个坐标，宽度和高度，<br />
当然我们只需要这些，并不需要把图片真正截取下来。</p>
<p> </p>
<p>jQuery购物网站产品展示. 作者：<a href="mailto:cssrain@gmail.com(admin">cssrain@gmail.com(admin</a>)</p>
<div>
<div>
<a title="http://www.cssrain.cn" rel="lightbox" href="http://www.cssrain.cn/attachments/month_0904/b2009430192719.jpg" target="_blank"><img src="http://www.cssrain.cn/attachments/month_0904/b2009430192719.jpg" border="0" alt="" /></a></p>
<p>程序介绍：<br />
1，点击大图可以弹出遮罩效果.<br />
2，下方小图可以左右滚动.<br />
3，点击新窗口打开，可以打开当前的大图片.<br />
4，遮罩层中小图也可以左右滚动，也可以打开大图片.</p>
<p>在 IE6,IE7,Firefox3 &amp; google 浏览器下测试通过.</p>
<p>演示：<br />
<a href="http://www.cssrain.cn/demo/jqueryProduct/demos.html" target="_blank">http://www.cssrain.cn/demo/jqueryProduct/demos.html</a></p>
<p>下载：<br />
<a href="http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar" target="_blank">http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar</a></div>
<div> </div>
<div>Gallerific</p>
<p align="center"><a href="http://www.twospy.com/galleriffic/index.html" target="_blank"><strong><img src="http://blueprintds.com/wp-content/uploads/2009/01/picture-11.png" alt="" /></strong></a></p>
<p><a href="http://www.twospy.com/galleriffic/index.html" target="_blank">Galleriffic</a> 是使用 Mike Alsup 的 <a href="http://www.bbon.cn/jQuery%20Cycle%20plugin" target="_blank">jQuery Cycle plugin</a> 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。</p>
<h5>2，ZoomImage</h5>
<p><a href="http://hotajax.org/jquery/photos-other-plugins/554-zoomimage-jquery-plugin.html" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-14.png" alt="" /></a></p>
<p><a href="http://hotajax.org/jquery/photos-other-plugins/554-zoomimage-jquery-plugin.html" target="_blank">zoomimage</a> ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。</p>
<h5>3，EasySlider</h5>
<p align="center"><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" target="_blank"><strong><img src="http://www.ajaxline.com/files/easyslider.png" alt="" width="450" height="140" /></strong></a></p>
<p><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" target="_blank">Easy Slider</a> 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。</p>
<h5>4，The Slider from Barack Obama’s website</h5>
<p align="center"><a href="http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/" target="_blank"><img src="http://www.vivalogo.com/vl-resources/images/bs.jpg" alt="" /></a></p>
<p>一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。</p>
<h5>5，CodaSlider</h5>
<p align="center"><a href="http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/" target="_blank"><img src="http://www.ajaxline.com/files/coda-slider.png" alt="" /></a></p>
<p><a href="http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/" target="_blank">CodaSlider</a>，又一个不错的滑动控制效果。</p>
<h5>6，jQuery Slider II</h5>
<p align="center"><a href="http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/" target="_blank"><img src="http://www.vivalogo.com/vl-resources/images/jgv2.jpg" alt="" /></a></p>
<p><a href="http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/" target="_blank">jQuery Slider II</a> 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。</p>
<h5>7，Beautiful Slider <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5>
<p align="center"><a href="http://dreamcss.blogspot.com/2009/04/create-beautiful-jquery-sliders.html" target="_blank"><strong><img src="http://lh4.ggpht.com/_zffIzal5cfI/SfKjCa2AxDI/AAAAAAAADjo/zY079AhPW5M/jQuerysliders_thumb8.png?imgmax=800" alt="" width="450" height="181" /></strong></a></p>
<p><a href="http://dreamcss.blogspot.com/2009/04/create-beautiful-jquery-sliders.html" target="_blank">Beautiful Slider</a>， 光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。</p>
<h5>８，LoopedSlider</h5>
<p><a href="http://code.google.com/p/loopedslider/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.ajaxline.com/files/looped.png" alt="" /></a></p>
<p><a href="http://code.google.com/p/loopedslider/" target="_blank">loopedSlider</a>是又一个任意内容滚动切换的幻灯片插件，使用操作简单。</p>
<h5>9，SpaceGallery</h5>
<p><a href="http://eyecon.ro/spacegallery/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/spacegallery.png" alt="Accessible news slider" /></a></p>
<p><a href="http://eyecon.ro/spacegallery/" target="_blank">SpaceGallery</a>是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。</p>
<h5>10，jQuery Popeye</h5>
<p><a href="http://plugins.jquery.com/project/popeye" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-13.png" alt="" /></a></p>
<h5>11，Noobslide <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5>
<p><a href="http://www.efectorelativo.net/laboratory/noobSlide/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/07/nooblide-advanced-tutorial.png" alt="Noobslide" /></a></p>
<h5>12，Accessible News Slider <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5>
<p><a href="http://www.reindel.com/accessible_news_slider/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/accessible-news-slider.jpg" alt="Accessible news slider" /></a></p>
<h5>13，SmoothGallery <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5>
<p><a href="http://smoothgallery.jondesign.net/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.catswhocode.com/blog/wp-content/uploads/cwc_smoothgallery.png" alt="SmoothGallery" /></a></p>
<p><a href="http://smoothgallery.jondesign.net/" target="_blank">SmoothGallery</a>是一个最好的 Javascript 幻灯片效果之一，可以实现各种不同的幻灯片转换效果。</p>
<h5>14，jQuery Multimedia Portfolio</h5>
<p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/multimedia-portfolio.png" alt="jQuery Multimedia Portfolio" /></a></p>
<p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html" target="_blank">jQuery Multimedia Portfolio</a>是一个基于jQuery 的滑动效果插件,除了可以展示图片之外，还可以加入各种不同类型的多媒体文件。</p>
<h5><strong>15，s3Slider</strong><a href="http://www.piksite.com/carousel.us/" target="_blank"> </a></h5>
<p><a href="http://www.serie3.info/s3slider/" target="_blank"><img style="DISPLAY: block; FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" src="http://images.sixrevisions.com/2009/03/13-09_slideshow.jpg" alt="" width="450" height="187" /></a></p>
<p><a href="http://www.serie3.info/s3slider/" target="_blank">s3Slider</a>是一个非常简单实用的流畅幻灯片效果，这个插件被应用在无数的WordPress专业主题模板中。</p>
<p>via: <a href="http://blarnee.com/wp/jquery-image-carousels-for-slidehow/" target="_blank">15 jQuery image carousels for slideshows and galleries</a></p>
<p> <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></div>
</div>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />导航类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p>jQuery plugin: Treeview<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个插件能够把无序列表转换成可展开与收缩的Tree。<br />
<img src="http://www.open-open.com/ajax/pimage/Treeview.jpg" border="0" alt="" /></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" target="_blank">jQuery plugin: Treeview</a></p>
<p> <img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> FastFind Menu Script<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
可拖动的嵌套菜单窗体，基于动态&#8221;AJAX&#8221;响应。<br />
<img src="http://www.open-open.com/ajax/pimage/FastFind_Menu_Script.jpg" border="0" alt="" /></p>
<p><a href="http://labs.activespotlight.net/jQuery/menu_demo.html" target="_blank">FastFind Menu Script</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> iconDock<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
iconDock一个基于jQuery开发的Fisheye menu。<br />
<img src="http://www.open-open.com/ajax/pimage/Dockexample.png" border="0" alt="" /></p>
<p><a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin" target="_blank">iconDock </a><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery UI Tabs<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery UI Tabs：一个功能强大，易于使用的Tab控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQueryUITabs1.jpg" border="0" alt="" /></p>
<p><a href="http://www.stilbuero.de/jquery/tabs" target="_blank">jQuery UI Tabs</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jstree<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
<a href="http://code.google.com/p/jstree/" target="_blank">jsTree</a>是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖&#8221;放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。<br />
<img src="http://www.open-open.com/ajax/pimage/jstree.jpg" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/jstree/" target="_blank">jstree</a><br />
 <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery File Tree<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_File_Tree.jpg" border="0" alt="" /></p>
<p><a href="http://abeautifulsite.net/notebook.php?article=58" target="_blank">jQuery File Tree</a><br />
 <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Superfish<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery菜单插件。支持水平/垂直方向。弹出子菜单不会被&lt;SELECT&gt;标签挡住。<br />
<img src="http://www.open-open.com/ajax/pimage/Superfish.jpg" border="0" alt="" /></p>
<p><a href="http://users.tpg.com.au/j_birch/plugins/superfish" target="_blank">Superfish</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> accordion menu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Accordion风格的jQuery菜单。<br />
<img src="http://www.open-open.com/ajax/pimage/accordion-menu.jpg" border="0" alt="" /></p>
<p><a href="http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html" target="_blank">accordion menu</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> CSS Dock Menu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery+CSS实现，仿Mac Dock Menu的一个导航菜单。<br />
<img src="http://www.open-open.com/ajax/pimage/css-dock-menu.jpg" border="0" alt="" /></p>
<p><a href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank">CSS Dock Menu</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> CheckTree<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
带Checkbox的树型jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/CheckTree.jpg" border="0" alt="" /></p>
<p><a href="http://static.geewax.org/checktree/index.html" target="_blank">CheckTree</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> idTabs<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
idTabs是一个能够创建简单到复杂Tab控件的jQuery插件。支持动态添加和选择Tab，idTabs能够绑定到不同的事件如mouseover。<br />
<img src="http://www.open-open.com/ajax/pimage/idTabs.jpg" border="0" alt="" /></p>
<p><a href="http://www.sunsean.com/idTabs/" target="_blank">idTabs</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Context Menu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery Context Menu是一个右键菜单插件。通过非常少的设置就能够轻松实现右键菜单功能。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Context_Menu.jpg" border="0" alt="" /></p>
<p><a href="http://www.abeautifulsite.net/notebook/80" target="_blank">jQuery Context Menu</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Right-click<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。这些事件包括：click、mouseup、mousedown。</p>
<p><a href="http://www.abeautifulsite.net/notebook/68" target="_blank">jQuery Right-click</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Multi Level CSS Menu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个多级水平CSS菜单，利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时，将自动调整展示方面。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Multi_Level_CSS_Menu.jpg" border="0" alt="" /></p>
<p><a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/" target="_blank">jQuery Multi Level CSS Menu</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> ListNav<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
ListNav是一个用于创建按字母顺序分类导航的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/ListNav.jpg" border="0" alt="" /></p>
<p><a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank">ListNav</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Simpletip<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Simpletip是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素（标签）之上。并定制展示方式与位置。tooltips可以是静态，动态或通过Ajax加载。<br />
<img src="http://www.open-open.com/ajax/pimage/Simpletip.jpg" border="0" alt="" /></p>
<p><a href="http://craigsworks.com/simpletip/" target="_blank">Simpletip</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Smooth Navigation Menu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Smooth Navigation Menu是一个采用jQuery开发，基于CSS的多层级网站导航菜单。菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。<br />
<img src="http://www.open-open.com/ajax/pimage/Smooth_Navigational_Menu.jpg" border="0" alt="" width="432" height="194" /></p>
<p><a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target="_blank">Smooth Navigation Menu</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jdMenu<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jdMenu是用于创建水平/垂直分层下拉菜单的jQuery插件.支持通过Ajax加载菜单项，自定义动画效果，易于定制外观，支持相对(relative)与绝对(absolute) 定位等。<br />
<img src="http://www.open-open.com/ajax/pimage/jdMenu.jpg" border="0" alt="" /></p>
<p><a href="http://jdsharp.us/jQuery/plugins/jdMenu/" target="_blank">jdMenu</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jqDock<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个能够将一组图片转换成类似于Mac风格鱼眼菜单(Dock Menu)的jQuery插件。菜单可以是水平方向或垂直方向。<br />
<img src="http://www.open-open.com/ajax/pimage/jqDock.jpg" border="0" alt="" /></p>
<p><a href="http://www.wizzud.com/jqDock/" target="_blank">jqDock</a><br />
 </p>
<p>  <a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank">Animated Menu using jQuery</a></p>
<p>A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.</p>
<p><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-07_animated_menu.jpg" alt="Animated Menu using jQuery" width="500" height="151" /></a></p>
<p><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank">View Demo Page</a></p>
<p> </p>
<p> <a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">Garagedoor Effect using jQuery</a></p>
<p><a href="http://www.gayadesign.com/about/" target="_blank">Gaya Kessler</a> presents a wonder JavaScript menu that mimics the real garage door using jQuery.</p>
<p><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-01_garage_door.jpg" alt="Garagedoor Effect using jQuery" width="500" height="109" /></a></p>
<p><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">View Demo Page</a></p>
<p> </p>
<p><a href="http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB" target="_blank">JGlide Menu</a></p>
<p>A very unique menu that floats on the page. Users can drag it to a position they desire.</p>
<p><a href="http://sonicradish.com/labs/jGlideMenu/current/static_demo.html" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-18_jglide.jpg" alt="JGlide Menu" width="500" height="200" /></a></p>
<p><a href="http://sonicradish.com/labs/jGlideMenu/current/static_demo.html" target="_blank">View Demo Page</a></p>
<p> </p>
<p> <a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Vertical Sliding jQuery Menu</a></p>
<p><a href="http://hv-designs.co.uk/" target="_blank">HVDesigns</a> presents a menu that drops down and reveals more links.</p>
<p><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-03_verticle_sliding.jpg" alt="Sliding jQuery Menu" width="500" height="192" /></a></p>
<p><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank">View Demo Page</a></p>
<p> </p>
<p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/" target="_blank">LavaLamp</a></p>
<p>When you hover an item, you’ll see the <a href="http://alistapart.com/articles/slidingdoors" target="_blank">CSS sliding door</a> technique created using jQuery. An alternate version for MooTols can be<a href="http://devthought.com/blog/projects-news/2007/01/cssjavascript-true-power-fancy-menu/" target="_blank"> here</a>.</p>
<p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-14_mootools_fancy_menu.jpg" alt="LavaLamp" width="500" height="96" /></a></p>
<p> </p>
<p> </p>
<h3>11. <a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank">Sliding JavaScript Menu Highlight</a></h3>
<p>This sliding hover effect script is an easy technique for highlighting menu items.</p>
<p><a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-08_highlight_menu.jpg" alt="Sliding JavaScript Menu Highlight" width="500" height="107" /></a></p>
<h3>12. <a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Fading Menu &#8211; Replacing Content</a></h3>
<p>This technique allows you to fade in and fade out menu items.</p>
<p><a href="http://css-tricks.com/examples/MenuFader/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-05_fading_menu.jpg" alt="Fading Menu - Replacing Content" width="500" height="129" /></a></p>
<p><a href="http://css-tricks.com/examples/MenuFader/" target="_blank">View Demo Page</a></p>
<h3>13. <a href="http://javascript-array.com/scripts/simple_drop_down_menu/" target="_blank">Simple Multi-level Drop-Down Menu</a></h3>
<p>A simple JavaScript drop down menu tutorial.</p>
<p><a href="http://javascript-array.com/scripts/simple_drop_down_menu/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-06_multil_level_drop_down.jpg" alt="Simple Multi-level Drop-Down Menu" width="500" height="167" /></a></p>
<h3>14. <a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/" target="_blank">Using jQuery for Background Image Animations</a></h3>
<p>A technique for creating animated menus using jQuery and CSS background-position properties.</p>
<p><a href="http://snook.ca/technical/jquery-bg/" target="_blank"><img src="http://images.sixrevisions.com/2009/04/29-12_background_position.jpg" alt="Using jQuery for Background Image Animations" width="500" height="150" /></a></p>
<p><a href="http://snook.ca/technical/jquery-bg/" target="_blank">View Demo Page</a></p>
<p> </p>
<ol>
<li>Tabpanel &#8211; jerichotab
<p>效果图:<br />
<img src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-11_000339.png" border="0" alt="" width="433" height="37" /><br />
简介:<br />
jerichoTab是一款模拟 firefox 标签页的插件, 通过丰富的API可以轻松的实现动态添加, 删除, 激活tab, 当tab页过多时会在左右两段增加滚动条&#8230;<br />
导航:<br />
<a href="http://www.cnblogs.com/fromearth/archive/2009/05/11/1453850.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/jerichotab/jerichotab.htm" target="_blank">在线演示</a></li>
</ol>
<p><a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a><span style="font-size: x-small; color: #000000;"> </span></p>
<p> </p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />验证类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a><span style="font-size: x-small; color: #000000;"> </span></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery plugin: Validation<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery校验插件。<br />
<img src="http://www.open-open.com/ajax/pimage/Validation.jpg" border="0" alt="" /></p>
<p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jQuery plugin: Validation</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Masked Input Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。<br />
<img src="http://www.open-open.com/ajax/pimage/input-mask.jpg" border="0" alt="" /></p>
<p><a href="http://digitalbush.com/projects/masked-input-plugin" target="_blank">Masked Input Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery password strength meter<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于检测密码强度的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_password_strength_me.jpg" border="0" alt="" /></p>
<p><a href="http://simplythebest.net/scripts/ajax/ajax_password_strength.html" target="_blank">jQuery password strength meter</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jVal<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery表单校验插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jVal_0-1-0_pod_ss.jpg" border="0" alt="" /></p>
<p><a href="http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin/" target="_blank">jVal</a></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />图表类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Flot<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Flot一个纯javascript绘画库，基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。<br />
<img src="http://www.open-open.com/ajax/pimage/Flot.jpg" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/flot/" target="_blank">Flot</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQchart<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于Canvas+jQuery，可拖放/交互的简单图形控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQchart.jpg" border="0" alt="" /></p>
<p><a href="http://plugins.jquery.com/project/jQchart" target="_blank">jQchart</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jquery.sparkline<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个用于生成迷你型线状图的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jquerysparkline.jpg" border="0" alt="" /></p>
<p><a href="http://omnipotent.net/jquery.sparkline/" target="_blank">jquery.sparkline</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />Form相关类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p>  <img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jNice</p>
<p>创建自定义外观的Form元素，功能与正常的Form元素相似。<br />
<img src="http://www.open-open.com/ajax/pimage/jNice.jpg" border="0" alt="" /></p>
<p><a href="http://plugins.jquery.com/project/jNice" target="_blank">jNice</a></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery calculate<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery计算插件，提供一些常用的数学计算功能比如：Sum、Average、Min、Max等。<br />
<img src="http://www.open-open.com/ajax/pimage/calculate1.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/calculate.jpg" border="0" alt="" /></p>
<p><a href="http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm" target="_blank">jQuery calculate</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery select box<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
模仿HTML select box实现功能的一个下拉菜单。<br />
<img src="http://www.open-open.com/ajax/pimage/27110702.jpg" border="0" alt="" /></p>
<p><a href="http://www.brainfault.com/2007/07/23/select-box-replacement/" target="_blank">jQuery select box</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> prettyCheckboxes<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
一个简单的jQuery插件用于定制checkboxe和radio按纽的外观。<br />
<img src="http://www.open-open.com/ajax/pimage/prettyCheckboxes.jpg" border="0" alt="" /></p>
<p><a href="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/" target="_blank">prettyCheckboxes</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jGrow<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jGrow这个jQuery插件能够让textarea根据文本的长度自动调整它的大小。<br />
<img src="http://www.open-open.com/ajax/pimage/2j16.gif" border="0" alt="" /></p>
<p><a href="http://lab.berkerpeksag.com/jGrow" target="_blank">jGrow</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Form Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
为表单(Form)提供全面Ajax支持，包括文件上传功能的jQuery插件。提供的方法/功能包括：ajaxForm、ajaxSubmit、 formToArray、formSerialize、fieldSerialize、fieldValue、clearForm、 clearFields、resetForm。这些方法能够让你轻松地管理Form中的数据和Form无刷新提交。</p>
<p><a href="http://malsup.com/jquery/form/" target="_blank">jQuery Form Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> mcDropdown jQuery Plug-in<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
mcDropdown是一个独特的UI控件，它能够让用户在一个复杂分级的树形下拉选项中进行选择。<br />
<img src="http://www.open-open.com/ajax/pimage/mcDropdown.jpg" border="0" alt="" /></p>
<p><a href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target="_blank">mcDropdown jQuery Plug-in</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Create A Slider From A Select Box<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个漂亮的jQuery插件能够自动将select boxes转换成一个sliders控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Slider.jpg" border="0" alt="" /></p>
<p><a href="http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/" target="_blank">Create A Slider From A Select Box</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> TextArea Resizer<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件提供Resizer bar可拖动调整TextArea大小。</p>
<p><img src="http://www.open-open.com/ajax/pimage/TextArea_Resizer.jpg" border="0" alt="" /></p>
<p><a href="http://plugins.jquery.com/project/TextAreaResizer" target="_blank">TextArea Resizer</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery MultiSelect<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery MultiSelect是一个可配置的jQuery插件。它将普通的列表框表单控件转换成带有CheckBox的下拉列表控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_MultiSelect.jpg" border="0" alt="" /></p>
<p><a href="http://www.abeautifulsite.net/notebook/62" target="_blank">jQuery MultiSelect</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Editable(jQuery Editable Plugin)<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个真正可定制的jQuery editableplugin。当前它能够将任意不可编辑的标签（span、div、p&#8230;等）转换成可编辑的textinput、password、 textarea、下拉列表（drop-downlist）等标签。你可以利用它的editableFactory对象来扩展添加自己所需的input type。<br />
<img src="http://www.open-open.com/ajax/pimage/Editable.jpg" border="0" alt="" /></p>
<p><a href="http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html" target="_blank">Editable(jQuery Editable Plugin)</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> NicejForm<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
NiceJForm 是一个拥有完美外形的表单，它是基于jquery库的，NiceJForms实际上是个jquery插件，用来使表单看起来更为美观。这不是最终版本，我知道可以通过多种途径改良它的脚本，但是至少，这是一个可以使用的稳定版本。非常感谢<a href="http://badboy.ro/" target="_blank">Lucian Slatineanu</a>发布的NiceJForm，在他的blog中你可以获得更多信息。<br />
在IE6，IE7，Firefox2.0中测试成功。</p>
<p><a href="http://www.hotajax.org/jquery/accordions-menu-form/207-nicejformjquery.html" target="_blank">NicejForm</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jScrollPane<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jScrollPane这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。<br />
<img src="http://www.open-open.com/ajax/pimage/jScrollPane.jpg" border="0" alt="" /></p>
<p><a href="http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html" target="_blank">jScrollPane</a></p>
<p>利用jQuery制作类似skype的按钮效果.</p>
<p>　　<br />
　　</p>
<p>演示：<br />
<a href="http://www.cssrain.cn/demo/skypebuttons/SkypeButton.html">http://www.cssrain.cn/demo/skypebuttons/SkypeButton.html</a><br />
<a href="http://www.cssrain.cn/demo/skypebuttons/SkypeButton2.html">http://www.cssrain.cn/demo/skypebuttons/SkypeButton2.html</a></p>
<p> </p>
<p> </p>
<ol>
<li>jCheckbox:
<p>效果图:<br />
<img src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-13_152028.png" border="0" alt="" width="420" height="154" /><br />
简介:<br />
jCheckbox用于模拟checkbox的效果, 方便开发人员自定义外观, 由于所有的属性都绑定到目标checkbox, 所以不必担心状态保存或取值的问题&#8230;<br />
导航:<br />
<a href="http://www.cnblogs.com/fromearth/archive/2009/05/13/1455957.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/jcheckbox/jcheckbox.htm" target="_blank">在线演示</a></li>
</ol>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />上传类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jqUploader<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
结合Javascript与Flash开发，拥有上传进度条的文件上传控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jqUploader.jpg" border="0" alt="" /></p>
<p><a href="http://www.pixeline.be/experiments/jqUploader/test.php" target="_blank">jqUploader</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Multiple File Upload Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
多文件上传插件（jQuery.MultiFile）能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如：文件扩展名校验。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.MultiFile.jpg" border="0" alt="" /></p>
<p><a href="http://www.fyneworks.com/jquery/multiple-file-upload/" target="_blank">jQuery Multiple File Upload Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery: Ajax file upload<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Ajax文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外，可以使用任何元素（图片，文字，按纽等）来触发文件选择窗口。<br />
<img src="http://www.open-open.com/ajax/pimage/Ajax_file_upload.jpg" border="0" alt="" /></p>
<p><a href="http://valums.com/projects/ajax-upload/" target="_blank">jQuery: Ajax file upload</a></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />时间日期类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p> </p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery UI Datepicker<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的日期选择控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_UI_Datepicker.jpg" border="0" alt="" /></p>
<p><a href="http://marcgrabanski.com/code/ui-datepicker/" target="_blank">jQuery UI Datepicker</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Date Picker<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Date Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历，标记特殊日期，易于通过CSS定制外观，自定义周的第一天，自定义月份和星期的显示名称。<br />
<img src="http://www.open-open.com/ajax/pimage/Date_Picker.jpg" border="0" alt="" /></p>
<p><a href="http://eyecon.ro/datepicker/" target="_blank">Date Picker</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Date Range Picker<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。<br />
<img src="http://www.open-open.com/ajax/pimage/Date_Range_Picker.jpg" border="0" alt="" /></p>
<p><a href="http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/" target="_blank">Date Range Picker</a></p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />圆角类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Corner<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
不需要图片就能够创建各种圆角形状的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Corner.jpg" border="0" alt="" /></p>
<p><a href="http://www.malsup.com/jquery/corner/" target="_blank">jQuery Corner</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> JQuery Curvy Corners<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于创建圆角的jQuery插件。压缩之后大小只有9k。<br />
<img src="http://www.open-open.com/ajax/pimage/JQuery_Curvy_Corners.jpg" border="0" alt="" /></p>
<p><a href="http://blue-anvil.com/jquerycurvycorners/test.html" target="_blank">JQuery Curvy Corners</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Corner<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
更多圆角效果的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQueryCorner1.jpg" border="0" alt="" /></p>
<p><a href="http://www.methvin.com/jquery/jq-corner-demo.html" target="_blank">jQuery Corner</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Corners<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这是一个用于创建漂亮圆角效果的jQuery插件。不需要用到图片或其它特殊的标签。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Corners.jpg" border="0" alt="" /></p>
<p><a href="http://www.atblabs.com/jquery.corners.html" target="_blank">jQuery Corners</a><br />
 </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />评价类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Ajax Rater Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
能够动态创建Ajax Rater的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_Ajax_Rater_Plugin.jpg" border="0" alt="" /></p>
<p><a href="http://www.m3nt0r.de/devel/raterDemo/" target="_blank">jQuery Ajax Rater Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Star Rating widget<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery框架开发的评价控件。<br />
<img src="http://www.open-open.com/ajax/pimage/Star_Rating_widget.jpg" border="0" alt="" width="204" height="177" /></p>
<p><a href="http://orkan.jaslo4u.pl/star_rating/index.html" target="_blank">Star Rating widget</a></p>
<p>  <img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Star Rating Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Star Rating Plugin是一个基于一组radio input boxes实现的星形评价控件。<br />
<img src="http://www.open-open.com/ajax/pimage/Star_Rating_Plugin.jpg" border="0" alt="" /></p>
<p><a href="http://www.fyneworks.com/jquery/star-rating/#tab-Overview" target="_blank">jQuery Star Rating Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Ajax Poll<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
利用jQuery的Ajax和动画效果并给合PHP开发的投票系统。<br />
<img src="http://www.open-open.com/ajax/pimage/poll-results.png" border="0" alt="" /></p>
<p><a href="http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/" target="_blank">Ajax Poll</a></p>
<p> </p>
<p>jQuery 投票调查组件<span style="WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: #333333; TEXT-INDENT: 0px; WHITE-SPACE: normal; LETTER-SPACING: normal; BORDER-COLLAPSE: separate"></p>
<div>
<div>
<p style="LINE-HEIGHT: normal">主要功能:</p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">测试答题框</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">可作心理测试等测试题使用</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">问题和选项通过questions.xml设置</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">显示当前得分</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">显示当前答题进度</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">可作翻看选过的选项</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966; line-height: normal;">通过不同的得分调取不同结果内容</span></p>
<p style="LINE-HEIGHT: normal"><span style="color: #339966;"><a href="http://nba.titan24.com/focus/kikx/testxml.html" target="_blank"><img src="http://cms.titan24.com/focus/kikx/testxml/a.png" alt="点击查看在线演示" /></a></span></p>
<p><span style="color: #339966;"><span style="WORD-SPACING: 0px; TEXT-TRANSFORM: none; COLOR: #333333; TEXT-INDENT: 0px; WHITE-SPACE: normal; LETTER-SPACING: normal; BORDER-COLLAPSE: separate"></p>
<p style="LINE-HEIGHT: normal"><a style="LINE-HEIGHT: normal" href="http://nba.titan24.com/focus/kikx/test.html" target="_blank">DEMO 地址 静态版本</a></p>
<p style="LINE-HEIGHT: normal"><a style="LINE-HEIGHT: normal" href="http://nba.titan24.com/focus/kikx/testxml.html" target="_blank">DEMO 地址 XML 版本</a></p>
<p style="LINE-HEIGHT: normal"><a style="LINE-HEIGHT: normal" href="http://kikx.googlecode.com/files/htestv2.rar" target="_blank">文件打包下载</a></p>
<p style="LINE-HEIGHT: normal">下面是装载XML 版本的代码 完整的代码请 <a style="LINE-HEIGHT: normal" href="http://kikx.googlecode.com/files/htestv2.rar" target="_blank">打包下载</a></p>
<p></span></span></div>
</div>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000"><img src="http://www.cnblogs.com/Emoticons/qface/055243803.gif" alt="" /></span></span><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff">虚拟键盘类</span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p> </p>
<p>在进行一些高安全性 Web 设计时，为了用户输入表单信息的安全，往往不希望用户直接通过实体鼠标进行操作，而是提供额外的 Web 虚拟鼠标来帮助用户完全某些隐私表单内容的输入，所以，就用到了本文提及的3个 JavaScript 安全虚拟键盘插件。</p>
<p style="TEXT-ALIGN: center"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard.jpg" alt="" /></p>
<h4><a href="http://keith-wood.name/keypad.html" target="_blank">自定义 jQuery 虚拟小键盘插件 plugin</a></h4>
<p><strong>jQuery 小键盘</strong> 是一个用于创建安全表单输入的插件工具，提供友好的键盘界面接口。使得可以仅允许用户输入数字、字母等限制性操作。</p>
<p style="TEXT-ALIGN: center"><a href="http://keith-wood.name/keypad.html" target="_blank"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard1.jpg" alt="keypad" width="622" height="209" /></a></p>
<h4><a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank">jQuery 虚拟键盘</a></h4>
<p><a href="http://designshack.co.uk/" target="_blank"><strong> </strong></a>一个创建 <a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank">jQuery 虚拟键盘</a> 的学习向导，教你一步一步地创建自己的jQuery 虚拟键盘，而且必须得 JavaScript 脚本可以免费下载。安全性高的 Web 虚拟键盘在金融类网站的和要求高安全性的表单操作中应用非常广泛。所以，学会如何编写一个优秀的Web 安全虚拟键盘非常有用。</p>
<p style="TEXT-ALIGN: center"><a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard2.jpg" alt="vkeyboard" width="622" height="243" /></a></p>
<h4><a href="http://www.greywyvern.com/code/js/keyboard.html" target="_blank">Virtual keyboard 虚拟键盘</a></h4>
<p>虚拟键盘被广泛应用在极高级别的网站开发中，包括在线银行类网站应用等。<strong>Virtual keyboards</strong> 能帮助我们防止键盘操作记录，阻止用户进行某些特殊按键的限制操作， <strong>virtual keyboard</strong> 使用简单，支持多种语言。</p>
<p style="TEXT-ALIGN: center"><a href="http://www.greywyvern.com/code/js/keyboard.html" target="_blank"><img src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard3.jpg" alt="Virtual-keyboard" width="623" height="294" /></a></p>
<p> </p>
<p> </p>
<p><span style="COLOR: #008000"><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p>
<p><span style="FONT-SIZE: 24pt"><span style="COLOR: #0000ff"><span style="FONT-SIZE: 24pt; COLOR: #0000ff"><img src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />其它类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><span style="font-size: x-small;">热点图书：www.hotbook.cn</span></a></span></span></span></p>
<p><span style="COLOR: #008000">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p>
<p> </p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> <span onclick="tagshow(event)">jquery</span>-aop</p>
<p>为 JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加<a href="http://en.wikipedia.org/wiki/Advice_in_aspect-%20oriented_programming" target="_blank">Advices</a>(<em>Before</em>、与<em>Around</em>)。</p>
<p><a href="http://code.google.com/p/jquery-aop/" target="_blank">jquery-aop</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> xmlObjectifier<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发，能够把XML DOM转换成 JSON的JavaScript library。</p>
<p><a href="http://www.terracoder.com/" target="_blank">xmlObjectifier</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> JQuery Portlets<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件提供一些Portlets功能包括：drag/drop，expand，collapse等。<br />
<img src="http://www.open-open.com/ajax/pimage/JQueryPortlets.jpg" border="0" alt="" /></p>
<p><a href="http://sonspring.com/journal/jquery-portlets" target="_blank">JQuery Portlets</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> EasyDrag jQuery Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery Plugin能够为大部DOM元素添加拖放功能。<br />
<img src="http://www.open-open.com/ajax/pimage/EasyDrag_jQuery_Plugin.jpg" border="0" alt="" /></p>
<p><a href="http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/" target="_blank">EasyDrag jQuery Plugin</a></p>
<ol>
<li>Drag and Drop:
<p>效果图:<br />
<img src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-14_105935.png" border="0" alt="" width="503" height="215" /><br />
简介:<br />
dragndrop为开发人员实现dom拖拽提供了更简单的方法, 并可以监视对象dom的位置以便进行数据(position)存储&#8230;<br />
导航:<br />
<a href="http://www.cnblogs.com/fromearth/archive/2009/05/14/1456654.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/dragndrop/dragndrop.htm" target="_blank">在线演示</a></li>
</ol>
<p> </p>
<ol>
<li>Resizable:
<p>效果图:<br />
<img src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-15_134712.png" border="0" alt="" width="350" height="202" /><br />
简介:<br />
resizable插件使html dom resize更易于实现(这句话真别扭)&#8230;<br />
导航:<br />
<a href="http://www.cnblogs.com/fromearth/archive/2009/05/15/1457649.html" target="_blank">详细介绍</a> | <a href="http://www.cnblogs.com/fromearth/archive/2009/05/15/1457649.html" target="_blank">在线演示</a></li>
</ol>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jFeed<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jFeed是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。</p>
<p><a href="http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin" target="_blank">jFeed</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.UI ProgressBar Widget<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
采用jQuery开发的进度条控件。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.UI.ProgressBar.jpg" border="0" alt="" /></p>
<p><a href="http://mattberseth.com/blog/2008/07/jqueryui_progressbar_widget.html" target="_blank">jQuery.UI ProgressBar Widget</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> JQuery Progress Bar<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子，服务器端采用PHP处理。<br />
<img src="http://www.open-open.com/ajax/pimage/jqueryprogressbar.jpg" border="0" alt="" /></p>
<p><a href="http://t.wits.sg/2008/06/20/jquery-progress-bar-11/" target="_blank">JQuery Progress Bar</a></p>
<p><a href="http://malsup.com/jquery/form/" target="_blank">jQuery Form Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jTemplates<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
基于jQuery开发的javascript模板引擎。</p>
<p><a href="http://jtemplates.tpython.com/" target="_blank">jTemplates</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Animated Collapsible DIV<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
为任何DIV层添加Web2.0风格的动画隐藏/显示效果。<br />
<img src="http://www.open-open.com/ajax/pimage/Animated_Collapsible_DIV.jpg" border="0" alt="" /></p>
<p><a href="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm" target="_blank">Animated Collapsible DIV</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Simple Effects Plugins<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery特效插件，可以实现收缩，隐藏，显示，淡入/淡出和上下滑动效果等．<br />
<img src="http://www.open-open.com/ajax/pimage/Simple_Effects_Plugins.jpg" border="0" alt="" width="400" height="181" /></p>
<p><a href="http://www.learningjquery.com/2008/02/simple-effects-plugins" target="_blank">Simple Effects Plugins</a><br />
 <br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.Hotkeys plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.Hotkeys.jpg" border="0" alt="" /><br />
<img src="http://www.open-open.com/ajax/pimage/jQuery.Hotkeys1.jpg" border="0" alt="" /></p>
<p><a href="http://code.google.com/p/js-hotkeys/" target="_blank">jQuery.Hotkeys plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jMP3<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jMP3是一个采用jQuery开发的JavaScript MP3插放器，提供一种可以在页面上直接播放MP3的简便方式。<br />
<img src="http://www.open-open.com/ajax/pimage/jMP3.jpg" border="0" alt="" /></p>
<p><a href="http://www.sean-o.com/jquery/jmp3/" target="_blank">jMP3</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Pure<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Pure是一个基于jQuery开发，能够动态生成HTML的JavaScript模板引擎。支持JSON数据。</p>
<p><a href="http://beebole.com/pure/" target="_blank">Pure</a><br />
<img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Chain.js<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Chain.js是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容，有利于数据与表现相分离。<br />
<img src="http://www.open-open.com/ajax/pimage/Chain.jpg" border="0" alt="" /></p>
<p><a href="http://github.com/raid-ox/chain.js/wikis" target="_blank">Chain.js</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> ppDrag<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
ppDrag是一个让页面元素拥有拖移（Drag&amp;Drop）效果的jQuery插件。<br />
<img src="http://www.open-open.com/ajax/pimage/ppDrag.jpg" border="0" alt="" /></p>
<p><a href="http://ppdrag.ppetrov.com/" target="_blank">ppDrag</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jqDnR<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jqDnR一个轻量级jQuery插件能够让你拖拽任何元素、调整元素大小。<br />
<img src="http://www.open-open.com/ajax/pimage/jqDnR.jpg" border="0" alt="" /></p>
<p><a href="http://dev.iceburg.net/jquery/jqDnR/" target="_blank">jqDnR</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Scroll Follow<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Scroll Follow是一个简单的jQuery插件。当滚动页面时，能够让DOM对象产生浮动跟随效果。<br />
<img src="http://www.open-open.com/ajax/pimage/Scroll_Follow.jpg" border="0" alt="" /></p>
<p><a href="http://kitchen.net-perspective.com/open-source/scroll-follow/" target="_blank">Scroll Follow</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery Taconite Plugin<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
这个jQuery插件能够利用单个Ajax调用结果同时更新多个DOM对象。</p>
<p><a href="http://www.malsup.com/jquery/taconite/" target="_blank">jQuery Taconite Plugin</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery URL Parser<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
用于解析URLs字符串的jQuery插件。方便你获取协议,主机,端口,查询参数,文件名,路径等。<br />
<img src="http://www.open-open.com/ajax/pimage/jQuery_URL_Parser.gif" border="0" alt="" /></p>
<p><a href="http://projects.allmarkedup.com/jquery_url_parser/" target="_blank">jQuery URL Parser</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> jQuery.xml2json<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
jQuery.xml2json是一个能够将简单的XML转换成JSON对象的jQuery插件。</p>
<p><a href="http://www.fyneworks.com/jquery/xml-to-json/#" target="_blank">jQuery.xml2json</a></p>
<p><img src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" alt="" /> Ajaxify<br />
<img src="http://www.open-open.com/ajax/resource/von.gif" border="0" alt="" /><br />
Ajaxify这个jQuery插件能够将一个页面中的所有链接转换成Ajax加载和提交请求。<br />
<img src="http://www.open-open.com/ajax/pimage/Ajaxify.jpg" border="0" alt="" /></p>
<p><a href="http://max.jsrhost.com/ajaxify/" target="_blank">Ajaxify</a></p>
<p> <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p>
<p> </p>
<p>jQuery Address &#8211; Deep linking plugin。 从 CssRain.cn 作者：cssrain@gmail.com(admin)</span></p>
<div>
<div>类似于瞄点技术( url#address )，使得浏览器的后退按钮生效。在Ajax应用中，可以使用。</p>
<p>演示：<br />
<a href="http://www.asual.com/jquery/address/samples/tabs/" target="_blank">http://www.asual.com/jquery/address/samples/tabs/</a><br />
<a href="http://www.asual.com/jquery/address/samples/api/" target="_blank">http://www.asual.com/jquery/address/samples/api/</a></p>
<p>下载：<br />
<a href="http://www.asual.com/jquery/address/" target="_blank">http://www.asual.com/jquery/address/</a></div>
<div> <a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></div>
<div><strong>quickSearch</strong><a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">quickSearch</a>，顾名思义是一个jQuery驱动的快速搜索插件，Ajax显示搜索结果。</p>
<p><a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">quickSearch</a> | <a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">Demo</a></p>
<p> </p>
<p>Refer to <a href="http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html">http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html</a></div>
</div>
<div style="margin-top: 15px; font-style: italic">
<p><strong>本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明：</strong> 转载自<a href="http://www.jssay.com/blog/">JSSAY&#039;S BLOG</a></p>
<p><strong>本文链接地址:</strong> <a href="http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/">http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/</a></p>
</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-2870579454529881";
/* 页脚，468x60的广告 */
google_ad_slot = "6663520172";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<h2  class="related_post_title">相关文章</h2><ul class="related_post"><li>2009年12月13日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/13/2009-best-jquery-plug-in-turn/" title="2009 年度最佳 jQuery 插件（转）">2009 年度最佳 jQuery 插件（转）</a></li><li>2009年11月29日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/29/%e7%94%a8jquery%e5%88%b6%e4%bd%9c%e7%9a%84%e5%87%a0%e6%ac%be3d%e6%95%88%e6%9e%9c/" title="用Jquery制作的几款3D效果">用Jquery制作的几款3D效果</a></li><li>2010年10月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/28/20-models-of-the-latest-highly-recommend-jquery-plugin/" title="极力推荐20款最新的jQuery插件">极力推荐20款最新的jQuery插件</a></li><li>2010年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2010/10/18/jquery-latest-version-v1-4-3-released/" title="Jquery最新版（V1.4.3）发布">Jquery最新版（V1.4.3）发布</a></li><li>2010年09月29日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/29/11-tab-navigation-solutions-useful/" title="11个有用的Tab导航解决方案">11个有用的Tab导航解决方案</a></li><li>2010年09月28日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/28/46-powerful-javascript-slider-and-scroll-bar/" title="46个功能强大的Javascript滑动器和滚动条">46个功能强大的Javascript滑动器和滚动条</a></li><li>2010年09月22日 -- <a href="http://www.jssay.com/blog/index.php/2010/09/22/24-high-jquery-effects/" title="24个高级JQuery特效">24个高级JQuery特效</a></li><li>2009年12月1日 -- <a href="http://www.jssay.com/blog/index.php/2009/12/01/jquery%e5%ad%a6%e4%b9%a0%e8%b5%84%e6%96%99/" title="JQuery学习资料">JQuery学习资料</a></li><li>2009年11月10日 -- <a href="http://www.jssay.com/blog/index.php/2009/11/10/jqueryextjsyuiprototypedojo%e7%ad%89js%e6%a1%86%e6%9e%b6%e7%9a%84%e5%8c%ba%e5%88%ab%e5%92%8c%e5%ba%94%e7%94%a8/" title="JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用">JQuery,ExtJS,YUI,Prototype,Dojo等JS框架的区别和应用</a></li><li>2009年10月18日 -- <a href="http://www.jssay.com/blog/index.php/2009/10/18/qq%e5%ae%a2%e6%9c%8d%e5%88%97%e8%a1%a8%e7%9a%84%e5%88%b6%e4%bd%9c/" title="QQ客服列表的制作">QQ客服列表的制作</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.jssay.com/blog/index.php/2009/11/06/1000-acura-jquery-plug-part-of/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

