<?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>Voland.com.cn &#187; Web 界面</title>
	<atom:link href="http://www.voland.com.cn/category/coding/web/feed" rel="self" type="application/rss+xml" />
	<link>http://www.voland.com.cn</link>
	<description>人生百年,诸事记之</description>
	<lastBuildDate>Thu, 02 Feb 2012 23:09:02 +0000</lastBuildDate>
	<language>zh</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Checkbox不选择时赋值的实现(非选中状态赋值)</title>
		<link>http://www.voland.com.cn/checkbox-is-not-selected-not-selected-to-pass-the-time-value-of</link>
		<comments>http://www.voland.com.cn/checkbox-is-not-selected-not-selected-to-pass-the-time-value-of#comments</comments>
		<pubDate>Wed, 10 Nov 2010 06:36:41 +0000</pubDate>
		<dc:creator>Nortan</dc:creator>
				<category><![CDATA[Java]]></category>
		<category><![CDATA[Web 界面]]></category>
		<category><![CDATA[checkbox]]></category>
		<category><![CDATA[checkbox赋值]]></category>

		<guid isPermaLink="false">http://www.voland.com.cn/?p=546</guid>
		<description><![CDATA[Checkbox在不选择时，并不会向服务器发送false值（或者off值），甚至连这个的参数名都不会向服务器端发送，所以通常我们判断取到的值为null，就认为用户没有选择，并给他的值设置为false,但一些情况下，我们可能不是手工来取这个值，而是写了一个统一的函数，直接把所有的参数转成FormBean，在这种情况下，取不到值的情况我们不一定都设置为false，因为还有可能本来就是取NULL的情况，所以如果checkbox 没有传递参数过来，我们也要想办法设置他的值为false. 在Spring的框架中，同样存在这样的问题，他的解决办法是为每一个Checkbox生成一个隐藏域，当用户没有选择checkbox时，也会向服务器端发送按一定规则命名的隐藏域，从而来表达用户没有选择这个控制的事实。 本次项目的框架是自己写的，出于更简单的原则，在做页面时，不为checkbox设置隐藏域，而是在提交过程中，动态为没有选择的checkbox生成隐藏域，这样页面上会更简洁。出于这个思想，用Jquery实现了一个插件，用来为没有选中的checkbox 传递false值给服务器端。代码如下： jQuery.fangdo = &#123; //forms_selector: form的选择器 checkboxField : function&#40;forms_selector&#41;&#123; $&#40;forms_selector&#41;.each&#40;function&#40;&#41;&#123; var cur_form = $&#40;this&#41;; cur_form.submit&#40;function&#40;&#41;&#123; $&#40;this&#41;.find&#40;&#34;:checkbox&#34;&#41;.each&#40;function&#40;i&#41;&#123; if&#40;!$&#40;this&#41;.attr&#40;&#34;checked&#34;&#41;&#41;&#123; cur_form.append&#40;&#34;&#60;input type='hidden' value='off' name='&#34;+ $&#40;this&#41;.attr&#40;'name'&#41; +&#34;'&#62;&#60;/input&#62;&#34;&#41;; &#125; &#125;&#41;; &#125;&#41;; &#125;&#41;; &#125; &#125;; 使用的方式主要有如下两种： $&#40;function&#40;&#41;&#123; //第一种，引用Form表单的id,注意，这里是id，不是name值 $.fangdo.checkboxField&#40;&#34;#registerForm&#34;&#41;; //第二种，引用所有Form表单，这种情况用于有多个Form都要设置checkbox在非选中状态生成隐藏域 $.fangdo.checkboxField&#40;&#34;Form&#34;&#41;; &#125;&#41;; 如果你有更好的方法，请共享出来，大家一起分享]]></description>
			<content:encoded><![CDATA[<p>Checkbox在不选择时，并不会向服务器发送false值（或者off值），甚至连这个的参数名都不会向服务器端发送，所以通常我们判断取到的值为null，就认为用户没有选择，并给他的值设置为false,但一些情况下，我们可能不是手工来取这个值，而是写了一个统一的函数，直接把所有的参数转成FormBean，在这种情况下，取不到值的情况我们不一定都设置为false，因为还有可能本来就是取NULL的情况，所以如果checkbox 没有传递参数过来，我们也要想办法设置他的值为false.</p>
<p>在Spring的框架中，同样存在这样的问题，他的解决办法是为每一个Checkbox生成一个隐藏域，当用户没有选择checkbox时，也会向服务器端发送按一定规则命名的隐藏域，从而来表达用户没有选择这个控制的事实。</p>
<p>本次项目的框架是自己写的，出于更简单的原则，在做页面时，不为checkbox设置隐藏域，而是在提交过程中，动态为没有选择的checkbox生成隐藏域，这样页面上会更简洁。出于这个思想，用Jquery实现了一个插件，用来为没有选中的checkbox 传递false值给服务器端。代码如下：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fangdo</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #006600; font-style: italic;">//forms_selector: form的选择器</span>
	checkboxField <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>forms_selector<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span>forms_selector<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> cur_form <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			cur_form.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checkbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>				
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
						cur_form.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;input type='hidden' value='off' name='&quot;</span><span style="color: #339933;">+</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'name'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;'&gt;&lt;/input&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
					<span style="color: #009900;">&#125;</span>
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>使用的方式主要有如下两种：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">//第一种，引用Form表单的id,注意，这里是id，不是name值</span>
	$.<span style="color: #660066;">fangdo</span>.<span style="color: #660066;">checkboxField</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#registerForm&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #006600; font-style: italic;">//第二种，引用所有Form表单，这种情况用于有多个Form都要设置checkbox在非选中状态生成隐藏域</span>
	$.<span style="color: #660066;">fangdo</span>.<span style="color: #660066;">checkboxField</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Form&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>如果你有更好的方法，请共享出来，大家一起分享</p>
]]></content:encoded>
			<wfw:commentRss>http://www.voland.com.cn/checkbox-is-not-selected-not-selected-to-pass-the-time-value-of/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google analytics脚本异步加载，加快访问速度</title>
		<link>http://www.voland.com.cn/google-analytics-script-asynchronous-load-speed-up-page-access-speed</link>
		<comments>http://www.voland.com.cn/google-analytics-script-asynchronous-load-speed-up-page-access-speed#comments</comments>
		<pubDate>Mon, 26 Jul 2010 05:50:14 +0000</pubDate>
		<dc:creator>Nortan</dc:creator>
				<category><![CDATA[Web 界面]]></category>
		<category><![CDATA[一起分享]]></category>
		<category><![CDATA[常用]]></category>
		<category><![CDATA[Google analytics]]></category>

		<guid isPermaLink="false">http://www.voland.com.cn/?p=501</guid>
		<description><![CDATA[Google analytics本身提供的脚本都是在页面全部加载完成后才会执行，如果网络情况不太好，这不仅影响统计，也会影响到访问速度，所以使用Google analytics，最完美的办法就是实现脚本异步加载，来加快页面访问速度。如果你现在还在使用google analytics，可以用如下代码替代原来的统计代码，实现异步统计： var _gaq = _gaq &#124;&#124; &#91;&#93;; _gaq.push&#40;&#91;'_setAccount', 'UA-XXXXX-X'&#93;&#41;; _gaq.push&#40;&#91;'_trackPageview'&#93;&#41;; &#160; &#40;function&#40;&#41; &#123; var ga = document.createElement&#40;'script'&#41;; ga.src = &#40;'https:' == document.location.protocol ? 'https://ssl' : 'http://www'&#41; + '.google-analytics.com/ga.js'; ga.setAttribute&#40;'async', 'true'&#41;; document.documentElement.firstChild.appendChild&#40;ga&#41;; &#125;&#41;&#40;&#41;; 很明显，需要把UA-XXXXX-X替换成你的ID就成了。 参考文档如下： * http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/ * http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/]]></description>
			<content:encoded><![CDATA[<p>Google analytics本身提供的脚本都是在页面全部加载完成后才会执行，如果网络情况不太好，这不仅影响统计，也会影响到访问速度，所以使用Google analytics，最完美的办法就是实现脚本异步加载，来加快页面访问速度。如果你现在还在使用google analytics，可以用如下代码替代原来的统计代码，实现异步统计：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> _gaq <span style="color: #339933;">=</span> _gaq <span style="color: #339933;">||</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
_gaq.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'_setAccount'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'UA-XXXXX-X'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
_gaq.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'_trackPageview'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> ga <span style="color: #339933;">=</span> document.<span style="color: #660066;">createElement</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ga.<span style="color: #660066;">src</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'https:'</span> <span style="color: #339933;">==</span> document.<span style="color: #660066;">location</span>.<span style="color: #660066;">protocol</span> <span style="color: #339933;">?</span>
    <span style="color: #3366CC;">'https://ssl'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://www'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span>
    <span style="color: #3366CC;">'.google-analytics.com/ga.js'</span><span style="color: #339933;">;</span>
ga.<span style="color: #660066;">setAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'async'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'true'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
document.<span style="color: #660066;">documentElement</span>.<span style="color: #660066;">firstChild</span>.<span style="color: #660066;">appendChild</span><span style="color: #009900;">&#40;</span>ga<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>很明显，需要把UA-XXXXX-X替换成你的ID就成了。</p>
<p><span id="more-501"></span></p>
<p>参考文档如下：<br />
*  <a href="http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/" target="_blank">http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/</a><br />
* <a href="http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/" target="_blank">http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.voland.com.cn/google-analytics-script-asynchronous-load-speed-up-page-access-speed/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>一个简单的Ajax封装类</title>
		<link>http://www.voland.com.cn/a-sample-ajax-class-a-simple-wrapper-class-ajax</link>
		<comments>http://www.voland.com.cn/a-sample-ajax-class-a-simple-wrapper-class-ajax#comments</comments>
		<pubDate>Thu, 01 Jul 2010 03:29:46 +0000</pubDate>
		<dc:creator>Nortan</dc:creator>
				<category><![CDATA[Web 界面]]></category>
		<category><![CDATA[常用]]></category>
		<category><![CDATA[ajax]]></category>

		<guid isPermaLink="false">http://www.voland.com.cn/?p=498</guid>
		<description><![CDATA[在一些小项目中,可能没有使用Jquery这样的js框架,但需要一些js常用的功能,如ajax请求,邮件校验,字符串去空格等,这里封装了一个ajax请求类,在小项目中比较适用.后面给出了一个使用例子. //类名：AJAX //创建方法：var ajaxobj=new AJAX;，如果创建失败则返回false //属性：method - 请求方法，字符串，POST或者GET，默认为POST //　　　url - 请求URL，字符串，默认为空 //　　　async - 是否异步，true为异步，false为同步，默认为true //　　　content - 请求的内容，如果请求方法为POST需要设定此属性，默认为空 //　　　callback - 回调函数，即返回响应内容时调用的函数，默认为直接返回，回调函数有一个参数为XMLHttpRequest对象，即定义回调函数时要这样：function mycallback(xmlobj) //方法：send() - 发送请求，无参数 &#160; function AJAXRequest&#40;&#41; &#123; var xmlObj = false; var CBfunc,ObjSelf; ObjSelf=this; try &#123; xmlObj=new XMLHttpRequest; &#125; catch&#40;e&#41; &#123; try &#123; xmlObj=new ActiveXObject&#40;&#34;MSXML2.XMLHTTP&#34;&#41;; &#125; catch&#40;e2&#41; &#123; try &#123; xmlObj=new ActiveXObject&#40;&#34;Microsoft.XMLHTTP&#34;&#41;; &#125; catch&#40;e3&#41; [...]]]></description>
			<content:encoded><![CDATA[<p>在一些小项目中,可能没有使用Jquery这样的js框架,但需要一些js常用的功能,如ajax请求,邮件校验,字符串去空格等,这里封装了一个ajax请求类,在小项目中比较适用.后面给出了一个使用例子.<span id="more-498"></span></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//类名：AJAX</span>
<span style="color: #006600; font-style: italic;">//创建方法：var ajaxobj=new AJAX;，如果创建失败则返回false</span>
<span style="color: #006600; font-style: italic;">//属性：method  -  请求方法，字符串，POST或者GET，默认为POST</span>
<span style="color: #006600; font-style: italic;">//　　　url         -  请求URL，字符串，默认为空</span>
<span style="color: #006600; font-style: italic;">//　　　async     -  是否异步，true为异步，false为同步，默认为true</span>
<span style="color: #006600; font-style: italic;">//　　　content -  请求的内容，如果请求方法为POST需要设定此属性，默认为空</span>
<span style="color: #006600; font-style: italic;">//　　　callback  - 回调函数，即返回响应内容时调用的函数，默认为直接返回，回调函数有一个参数为XMLHttpRequest对象，即定义回调函数时要这样：function mycallback(xmlobj)</span>
<span style="color: #006600; font-style: italic;">//方法：send()     -  发送请求，无参数</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> AJAXRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> xmlObj <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> CBfunc<span style="color: #339933;">,</span>ObjSelf<span style="color: #339933;">;</span>
	ObjSelf<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlObj<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlObj<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;MSXML2.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span> xmlObj<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e3<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> xmlObj<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>xmlObj<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">url</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">async</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">content</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">callback</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>cbobj<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">send</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method</span><span style="color: #339933;">||!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">url</span><span style="color: #339933;">||!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">async</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		xmlObj.<span style="color: #000066;">open</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">url</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">async</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #009900;">&#41;</span> xmlObj.<span style="color: #660066;">setRequestHeader</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Content-Type&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;application/x-www-form-urlencoded&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		xmlObj.<span style="color: #660066;">onreadystatechange</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>xmlObj.<span style="color: #660066;">readyState</span><span style="color: #339933;">==</span><span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>xmlObj.<span style="color: #000066;">status</span><span style="color: #339933;">==</span><span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					ObjSelf.<span style="color: #660066;">callback</span><span style="color: #009900;">&#40;</span>xmlObj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">method</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #009900;">&#41;</span> xmlObj.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">else</span> xmlObj.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>使用例子如下</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> deleteLogicCompany<span style="color: #009900;">&#40;</span>logicCompanyid<span style="color: #339933;">,</span>userid<span style="color: #339933;">,</span>uName<span style="color: #339933;">,</span>cName<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">confirm</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;你要删除分给 '&quot;</span><span style="color: #339933;">+</span>uName<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;' 的 '&quot;</span><span style="color: #339933;">+</span>cName<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;' 吗?<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>        删除数据后,不可恢复,请注意!!!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ajaxobj<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> AJAXRequest<span style="color: #339933;">;</span>    <span style="color: #006600; font-style: italic;">// 创建AJAX对象</span>
		ajaxobj.<span style="color: #660066;">method</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// 设置请求方式为GET</span>
		ajaxobj.<span style="color: #660066;">url</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;../reportJsp/16ds/deleLogicCompany.jsp&quot;</span>  <span style="color: #006600; font-style: italic;">// 请求的URL</span>
		ajaxobj.<span style="color: #660066;">content</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;logicCompanyid=&quot;</span><span style="color: #339933;">+</span>logicCompanyid<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&amp;userid=&quot;</span><span style="color: #339933;">+</span>userid
		ajaxobj.<span style="color: #660066;">callback</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xmlobj<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> xmlobj.<span style="color: #660066;">responseText</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//这里返回的值要看你的请求返回什么东西了.</span>
			<span style="color: #003366; font-weight: bold;">var</span> isRepeat <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>value <span style="color: #339933;">==</span> <span style="color: #3366CC;">'_yes'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>isRepeat <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'数据已经删除'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				window.<span style="color: #660066;">location</span>.<span style="color: #660066;">reload</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'数据删除失败'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
	ajaxobj.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>    <span style="color: #006600; font-style: italic;">// 发送请求</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.voland.com.cn/a-sample-ajax-class-a-simple-wrapper-class-ajax/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Jquery常用学习文档及资料</title>
		<link>http://www.voland.com.cn/jquery_reference_materials_and_docs_to_learn</link>
		<comments>http://www.voland.com.cn/jquery_reference_materials_and_docs_to_learn#comments</comments>
		<pubDate>Wed, 31 Mar 2010 07:37:34 +0000</pubDate>
		<dc:creator>Nortan</dc:creator>
				<category><![CDATA[Web 界面]]></category>
		<category><![CDATA[Jquery例子]]></category>
		<category><![CDATA[jQuery入门]]></category>
		<category><![CDATA[Jquery学习文档]]></category>
		<category><![CDATA[jQuery资料]]></category>

		<guid isPermaLink="false">http://www.voland.com.cn/?p=276</guid>
		<description><![CDATA[收集Jquery的学习文档与资料地址，jQuery入门，jQuery API参考文档及教程例子]]></description>
			<content:encoded><![CDATA[<p>ExtJS很漂亮也很强大，但我觉得它因受UI制约，在某些场合用起来并不灵活，相对Extjs，Jquery是一个相对小巧，功能更强大，使用更灵活的js框架,而且JQuery还有数不清的插件可以使用。这个文章主要收集常用的学习文档及其它关于Jquery的资料地址链接，并随时进行更新维护。</p>
<p>1、jQuery中文入门指南，翻译加实例，jQuery的起点教程<br />
<a href="http://www.k99k.com/jQuery_getting_started.html">http://www.k99k.com/jQuery_getting_started.html</a></p>
<p>2、jQueryAPI参考文档中文版翻译下载地址<br />
<a href="http://code.google.com/p/jquery-api-zh-cn/downloads/list">http://code.google.com/p/jquery-api-zh-cn/downloads/list</a></p>
<p>3、 jQuery从入门到晋级教程,这个教程有例子，比较容易懂<br />
<a href="http://www.jzxue.com/special/jQuerycongrumendaojinjijiaocheng_2100.html">http://www.jzxue.com/special/jQuerycongrumendaojinjijiaocheng_2100.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.voland.com.cn/jquery_reference_materials_and_docs_to_learn/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用JQuery仿淘宝首页的图片滚动展现</title>
		<link>http://www.voland.com.cn/home-page-with-jquery-imitation-taobao-pictures-scrolling-display</link>
		<comments>http://www.voland.com.cn/home-page-with-jquery-imitation-taobao-pictures-scrolling-display#comments</comments>
		<pubDate>Wed, 24 Mar 2010 02:14:38 +0000</pubDate>
		<dc:creator>Nortan</dc:creator>
				<category><![CDATA[Web 界面]]></category>
		<category><![CDATA[jQuery图片]]></category>
		<category><![CDATA[淘宝首页图片]]></category>
		<category><![CDATA[滚动展现图片]]></category>

		<guid isPermaLink="false">http://www.voland.com.cn/?p=261</guid>
		<description><![CDATA[用Jquery来以滚动的形式展现图片，需要三个步骤，第一个步骤就是把所展现的图片用&#60;li&#62;标签来列举，并列举每个图片对应的序号，第二步使用CSS来控制图片及序号的样式，相对图片来说，主要控制展现图片位的大小，相对序号来讲，除了定位外，还要考虑到当然展现的图片的序号高亮显示。第三步是使用Jquery来控制图片定时滚动切换。下面对这三步进行详细说明 第一步，展现图片内容的html代码为,注意&#60;li class=”on”&#62;1&#60;/li&#62;这里的on表示载入后，第一个图片为展现状态 &#60;div id=&#34;idTransformView&#34; class=&#34;lgl_container&#34;&#62; &#60;ul id=&#34;idSlider&#34; class=&#34;lgl_slider&#34;&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;http://localhost:3000/bin/a.gif&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;http://localhost:3000/bin/b.gif&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;img src=&#34;http://localhost:3000/bin/c.gif&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;&#60;/li&#62; &#60;/ul&#62; &#160; &#60;ul id=&#34;idNum&#34; class=&#34;lgl_num&#34;&#62; &#60;li class=&#34;on&#34;&#62;1&#60;/li&#62; &#60;li&#62;2&#60;/li&#62; &#60;li&#62;3&#60;/li&#62; &#60;/ul&#62; &#60;/div&#62; 第二步，css控制 .lgl_container&#123;width:526px; height:150px; overflow:hidden;position:relative;&#125; .lgl_slider&#123;position:absolute;&#125; .lgl_slider li&#123; list-style:none;display:inline;&#125; .lgl_slider img&#123; width:526px; height:150px; display:block;&#125; .lgl_num&#123; position:absolute; right:5px; bottom:5px;&#125; .lgl_num li&#123; float: [...]]]></description>
			<content:encoded><![CDATA[<p>用Jquery来以滚动的形式展现图片，需要三个步骤，第一个步骤就是把所展现的图片用&lt;li&gt;标签来列举，并列举每个图片对应的序号，第二步使用CSS来控制图片及序号的样式，相对图片来说，主要控制展现图片位的大小，相对序号来讲，除了定位外，还要考虑到当然展现的图片的序号高亮显示。第三步是使用Jquery来控制图片定时滚动切换。下面对这三步进行详细说明</p>
<p style="text-align: center;"><a rel="attachment wp-att-267" href="http://www.voland.com.cn/home-page-with-jquery-imitation-taobao-pictures-scrolling-display/jquery_taobao"><img class="aligncenter size-full wp-image-267" title="使用jquery实现的类淘宝首页图片展示效果" src="http://www.voland.com.cn/wp-content/uploads/2010/03/jquery_taobao.png" alt="使用jquery实现的类淘宝首页图片展示效果" width="528" height="158" /></a></p>
<p>第一步，展现图片内容的html代码为,注意&lt;li class=”on”&gt;1&lt;/li&gt;这里的on表示载入后，第一个图片为展现状态<span id="more-261"></span></p>

<div class="wp_syntax"><div class="code"><pre class="c" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;idTransformView&quot;</span> class<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;lgl_container&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>ul id<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;idSlider&quot;</span> class<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;lgl_slider&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;#&quot;</span><span style="color: #339933;">&gt;&lt;</span>img src<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;http://localhost:3000/bin/a.gif&quot;</span> alt<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #339933;">/&gt;&lt;/</span>a<span style="color: #339933;">&gt;&lt;/</span>li<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;#&quot;</span><span style="color: #339933;">&gt;&lt;</span>img src<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;http://localhost:3000/bin/b.gif&quot;</span> alt<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #339933;">/&gt;&lt;/</span>a<span style="color: #339933;">&gt;&lt;/</span>li<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;&lt;</span>a href<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;#&quot;</span><span style="color: #339933;">&gt;&lt;</span>img src<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;http://localhost:3000/bin/c.gif&quot;</span> alt<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #339933;">/&gt;&lt;/</span>a<span style="color: #339933;">&gt;&lt;/</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>ul id<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;idNum&quot;</span> class<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;lgl_num&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li class<span style="color: #339933;">=</span><span style="color: #ff0000;">&quot;on&quot;</span><span style="color: #339933;">&gt;</span><span style="color: #0000dd;">1</span><span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span><span style="color: #0000dd;">2</span><span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span><span style="color: #0000dd;">3</span><span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

<p>第二步，css控制</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.lgl_container</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">526px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>position<span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span> li<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>display<span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span> img<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">526px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span> li<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FF7300</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Arial<span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#FF7300</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span> li.on<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FF7300</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>第三步，js控制显示</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
     <span style="color: #003366; font-weight: bold;">var</span> len  <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#idNum &gt; li&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
	 <span style="color: #003366; font-weight: bold;">var</span> index <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	 $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#idNum li&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		index  <span style="color: #339933;">=</span>   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#idNum li&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">index</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		showImg<span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	 <span style="color: #006600; font-style: italic;">//滑入 停止动画，滑出开始动画.</span>
	 $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#idTransformView'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>MyTime<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				 clearInterval<span style="color: #009900;">&#40;</span>MyTime<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			  <span style="color: #009900;">&#125;</span>
	 <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			  MyTime <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			    showImg<span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span>
				index<span style="color: #339933;">++;</span>
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>index<span style="color: #339933;">==</span>len<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>index<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
			  <span style="color: #009900;">&#125;</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">5000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	 <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	 <span style="color: #006600; font-style: italic;">//自动开始</span>
	 <span style="color: #003366; font-weight: bold;">var</span> MyTime <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		showImg<span style="color: #009900;">&#40;</span>index<span style="color: #009900;">&#41;</span>
		index<span style="color: #339933;">++;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>index<span style="color: #339933;">==</span>len<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>index<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
	 <span style="color: #009900;">&#125;</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">5000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// 关键函数：通过控制top ，来显示不通的幻灯片</span>
<span style="color: #003366; font-weight: bold;">function</span> showImg<span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#idSlider&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>top <span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">150</span><span style="color: #339933;">*</span>i<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">500</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		 $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#idNum li&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;on&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">siblings</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">removeClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;on&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>后续：目前淘宝的是圆圈来表示第几帧，这个也比较好改，把样式改成如下就可以了</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.lgl_container</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">526px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>position<span style="color: #00AA00;">:</span><span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span> li<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>display<span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_slider</span> img<span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">526px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">150px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span><span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span> li<span style="color: #00AA00;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FFFFFF</span><span style="color: #00AA00;">;</span>
    border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span> <span style="color: #933;">20px</span> <span style="color: #933;">20px</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#DE7D4B</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">13px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-2px</span><span style="color: #00AA00;">;</span>
    opacity<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0.7</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">center</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.lgl_num</span> li.on<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FF6600</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#FFFFFF</span><span style="color: #00AA00;">;</span>
    filter<span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
    opacity<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.voland.com.cn/home-page-with-jquery-imitation-taobao-pictures-scrolling-display/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

