<?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>前端之路 &#187; jquery</title>
	<atom:link href="http://www.simcn.com/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://www.simcn.com</link>
	<description>网站开发, 前端开发, 高性能前端开发</description>
	<lastBuildDate>Thu, 03 Nov 2011 02:08:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Jquery1.2快速参考图片.</title>
		<link>http://www.simcn.com/jquery1-2-quick-ref</link>
		<comments>http://www.simcn.com/jquery1-2-quick-ref#comments</comments>
		<pubDate>Tue, 28 Sep 2010 01:27:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[默认分类]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.simcn.com/?p=318</guid>
		<description><![CDATA[虽然版本比较老. 但基本的功能都在. 可以直接访问作者网站查看大图. http://colorcharge.com/jquery/]]></description>
			<content:encoded><![CDATA[<p>虽然版本比较老. 但基本的功能都在.<br />
<a href="http://www.simcn.com/jquery1-2-quick-ref/jquery12_colorcharge" rel="attachment wp-att-319"><img src="http://www.simcn.com/wp-content/uploads/2010/09/jquery12_colorcharge-300x205.png" alt="" title="jquery12_colorcharge" width="300" height="205" class="alignnone size-medium wp-image-319" /></a></p>
<p>可以直接访问作者网站查看大图.<br />
<a href="http://colorcharge.com/jquery/">http://colorcharge.com/jquery/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.simcn.com/jquery1-2-quick-ref/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>各种图片与内容展示(lightbox)实现</title>
		<link>http://www.simcn.com/%e5%90%84%e7%a7%8d%e5%9b%be%e7%89%87%e4%b8%8e%e5%86%85%e5%ae%b9%e5%b1%95%e7%a4%balightbox%e5%ae%9e%e7%8e%b0</link>
		<comments>http://www.simcn.com/%e5%90%84%e7%a7%8d%e5%9b%be%e7%89%87%e4%b8%8e%e5%86%85%e5%ae%b9%e5%b1%95%e7%a4%balightbox%e5%ae%9e%e7%8e%b0#comments</comments>
		<pubDate>Thu, 13 Nov 2008 06:11:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[Thickbox]]></category>

		<guid isPermaLink="false">http://www.simcn.com/?p=78</guid>
		<description><![CDATA[Thickbox &#8211; 基于 jQuery，支持 AJAX，轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k，目前还可作为 WordPress 的插件使用。 GreyBox &#8211; 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。 GreyBox Redux &#8211; 基于 jQuery，比 GreyBox 更轻。 Lightbox v2.0 &#8211; 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。 Lightbox with moo.fx &#8211; 基于 prototype，但只能用于图片。 Lightbox Gone Wild &#8211; modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。 Multi-faceted LIghtbox &#8211; 又一个基于 prototype [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all">Thickbox</a> &#8211; 基于 <a href="http://jquery.com/">jQuery</a>，支持 AJAX，轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k，目前还可作为 <a href="http://patrickhaney.com/thinktank/2006/04/25/thickbox-plugin-for-wordpress">WordPress 的插件</a>使用。</p>
<p><a href="http://orangoo.com/labs/GreyBox/">GreyBox</a> &#8211; 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。</p>
<p><a href="http://jquery.com/demo/grey/">GreyBox Redux</a> &#8211; 基于 jQuery，比 GreyBox 更轻。</p>
<p><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox v2.0</a> &#8211; 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。</p>
<p><a href="http://www.alwaysbeta.com/2006/02/08/building-ab-customizing-lightbox/">Lightbox with moo.fx</a> &#8211; 基于 prototype，但只能用于图片。<br />
<a href="http://particletree.com/features/lightbox-gone-wild/"><br />
Lightbox Gone Wild</a> &#8211; modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。</p>
<p><a href="http://www.gregphoto.net/lightbox/">Multi-faceted LIghtbox</a> &#8211; 又一个基于 prototype 的，不过这个为各种可用于 lightbox 的数据类型提供了选项。</p>
<p><a href="http://www.eight.nl/files/leightbox/">Leightbox</a> &#8211; 和 Lightbox Gone Wild 很相似，只是 Leightbox 以 html 方式存放内容，所以可以被搜索引擎索引到。</p>
<p><a href="http://blogus.xilinus.com/pages/javawin">xilinus</a> &#8211; 使用简单，基于  prototype，很容易定制，可使用多种内容选项。</p>
<p><a href="http://serennz.sakura.ne.jp/toybox/lightbox/?en">Lightbox Plus</a> &#8211; 可以自动根据窗口的大小缩放图片。</p>
<p><a href="http://www.mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/">Suckerfish Hover Lighbox</a> &#8211; 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。</p>
<p><a href="http://www.doknowevil.net/litebox/">Litebox</a> &#8211; 这是 Lightbox 的另一个版本，代码量减少了，使用了 moo.fx 和 prototype-lite，如果页面需要减肥的话，可以选择这个。</p>
<p><a href="http://www.ryanjlowe.com/?p=9">LITBox</a> &#8211; 使用类写的 lightbox，所以可以创建多个对象实例，并且单独进行控制。基于 Thickbox。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.simcn.com/%e5%90%84%e7%a7%8d%e5%9b%be%e7%89%87%e4%b8%8e%e5%86%85%e5%ae%b9%e5%b1%95%e7%a4%balightbox%e5%ae%9e%e7%8e%b0/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>基于jquery图片轮播广告</title>
		<link>http://www.simcn.com/%e5%9f%ba%e4%ba%8ejquery%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad%e5%b9%bf%e5%91%8a</link>
		<comments>http://www.simcn.com/%e5%9f%ba%e4%ba%8ejquery%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad%e5%b9%bf%e5%91%8a#comments</comments>
		<pubDate>Fri, 31 Oct 2008 07:48:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[轮播]]></category>

		<guid isPermaLink="false">http://www.simcn.com/?p=50</guid>
		<description><![CDATA[1. 需要引用 jquery库 2. 样式表 body{ padding:0px; margin:0px; } #Carousel_Frame img{border:0;} #Carousel_Frame{width: 450px; height:332px; text-align:left; overflow:hidden; border:0px solid #000; position:absolute; } #Carousel_list{ width: 450px; height:332px; } /* 图片大小 */ #Carousel_list a{ display: block;} #Carousel_Thumbnails { width: 450px; HEIGHT: 56px; position:absolute; z-index:2; top:270px; left:10px;} #Carousel_Thumbnails ul{ filter: Alpha(Opacity=30); opacity: 0.8; padding:0px; margin:0px;} #Carousel_Thumbnails ul li { [...]]]></description>
			<content:encoded><![CDATA[<p>1. 需要引用 jquery库</p>
<pre class="brush:javascript">
<script src="/js/jquery.js" type="text/javascript"></script>
</pre>
<p>2. 样式表</p>
<pre class="brush:css">
body{ padding:0px; margin:0px; }
#Carousel_Frame img{border:0;}
#Carousel_Frame{width: 450px; height:332px; text-align:left; overflow:hidden; border:0px solid #000; position:absolute; }
#Carousel_list{ width: 450px; height:332px; } /* 图片大小 */
#Carousel_list a{ display: block;}
#Carousel_Thumbnails { width: 450px;  HEIGHT: 56px;  position:absolute; z-index:2; top:270px; left:10px;}
#Carousel_Thumbnails ul{ filter: Alpha(Opacity=30); opacity: 0.8; padding:0px; margin:0px;}
#Carousel_Thumbnails ul li { float: left;  width: 50px;  position:relative; CURSOR: pointer;  HEIGHT: 50px;  BORDER: 3px solid #fff; margin-right:3px;}
#Carousel_Thumbnails ul li img{ width:50px; height:50px;}
</pre>
<pre class="brush:html">
<div id="Carousel_Frame">
<div id="Carousel_list"><a href="http://www.google.com" target="_blank"><img src="data/user_files/3e9e23a50a553d710a920ee2c4897d4d.jpg" alt="" /></a> <a href="http://www.baidu.com" target="_blank"><img src="data/user_files/1acb512fe2295b339d56ac297d2c4b5f.jpg" alt="" /></a> <a href="http://www.mbevip.com" target="_blank"><img src="data/user_files/7dbdb028f790b2a1772dc7f5540aad16.jpg" alt="" /></a> <a href="http://www.vtion.com.cn" target="_blank"><img src="data/user_files/dfb950244f3d75475043d7c4c5b1e0c3.jpg" alt="" /></a> <a href="http://www.mbevip.com" target="_blank"><img src="data/user_files/13045a3e7496d1d2185182a8ecb792ad.jpg" alt="" /></a></div>
<div id="Carousel_Thumbnails">
<ul>
<li id="1″><img title="彬彬首页轮播第一张" src="data/user_files/3e9e23a50a553d710a920ee2c4897d4d.jpg" alt="" /></li>
<li id="2″><img title="彬彬首页轮播第二张" src="data/user_files/1acb512fe2295b339d56ac297d2c4b5f.jpg" alt="" /></li>
<li id="3″><img title="彬彬首页轮播第三张" src="data/user_files/7dbdb028f790b2a1772dc7f5540aad16.jpg" alt="" /></li>
<li id="4″><img title="彬彬首页轮播第四张" src="data/user_files/dfb950244f3d75475043d7c4c5b1e0c3.jpg" alt="" /></li>
<li id="5″><img title="彬彬首页轮播第五张" src="data/user_files/13045a3e7496d1d2185182a8ecb792ad.jpg" alt="" /></li>
</ul>
</div>
</div>
</pre>
<pre class="brush:javascript">
<script type="text/javascript">
<!–
var t=0;
var n=0;
var count= jQuery("#Carousel_list a").size();
var global_changTime = 2000;
jQuery("#Carousel_list a:not(:first-child)").hide();
jQuery("#Carousel_Thumbnails li").eq(0).css({"border-color":"#FF0000″})
jQuery("#Carousel_Thumbnails li").mouseover(function() {
 var i = jQuery(this).attr("id") - 1;
 n = i;
 if (i >= count) return;
 jQuery("#Carousel_list a").filter(":visible").hide().parent().children().eq(i).show();
 jQuery(this).css({"border-color":"#f00″}).siblings().css({"border-color":"#fff"});
});
t = setInterval("showAuto()", global_changTime);
jQuery("#Carousel_Frame").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", global_changTime);});

function showAuto(){
 n = n >= (count - 1) ? 0 : ++n;
 jQuery("#Carousel_Thumbnails li").eq(n).trigger(’mouseover’);
}
// –>
</script>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.simcn.com/%e5%9f%ba%e4%ba%8ejquery%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad%e5%b9%bf%e5%91%8a/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

