<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href='http://feed.wange.im/styles/feedsky1.xsl' type='text/xsl' ?><!--这是一个由Feedsy提供技术支持的Feed，为了提高读者阅读的体验，以及满足用户美化自己Feed的需要，我们设计了多种精美的Feed模板，提供给大家选择，所有最终呈现出来的样式，皆由用户自愿选择使用，未经许可，任何团体和个人，请不要擅自修改样式或者盗用，这是对于用户选择权的尊重。--><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:fs="http://www.feedsky.com/namespace/feed" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><atom:link href="http://feed.wange.im" type="application/rss+xml" rel="self"></atom:link><fs:self_link href="http://feed.feedsky.com/wange" type="application/rss+xml"></fs:self_link><lastBuildDate>Sat, 05 May 2012 00:26:50 GMT</lastBuildDate><title>Life Studio</title><description>My Life, My Studio...</description><link>http://wange.im</link><sy:updatePeriod>hourly</sy:updatePeriod><sy:updateFrequency>1</sy:updateFrequency><language>en</language><pubDate>Sat, 05 May 2012 00:26:50 GMT</pubDate><item><title>input 输入框获得/失去焦点时隐藏/显示文字</title><link>http://wange.im/input-focus-blur-text.html</link><content:encoded>&lt;p&gt;这个标题可能比较拗口不好理解，但是我相信所有的人都见过这个效果，大家可以看本站右上角的搜索输入框，默认显示着“输入搜索内容”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“输入搜索内容”的提示。是不是很常见？很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的：&lt;/p&gt;
&lt;div class=&quot;source&quot; style=&quot;color: #000000; font-family: 'Courier New','Consolas','Lucida Console';&quot;&gt;&lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;type=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;value=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;不推荐这么做&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;onfocus=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;if(this.value == '不推荐这么做') this.value = ''&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;onblur=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;if(this.value == '') this.value = '不推荐这么做'&quot;&lt;/span&gt; &lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：&lt;/p&gt;
&lt;p&gt;1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？&lt;/p&gt;
&lt;p&gt;2、如果要修改其中的提示文字，费时费力又不好维护。&lt;/p&gt;
&lt;p&gt;3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。&lt;/p&gt;
&lt;p&gt;那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？&lt;/p&gt;
&lt;p&gt;相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 &lt;a href=&quot;http://wange.im/demo/input&quot; title=&quot;input 输入框获得/失去焦点时隐藏/显示文字&quot;&gt;DEMO&lt;/a&gt;，具体方法如下：&lt;/p&gt;
&lt;p&gt;1、html 部分：&lt;/p&gt;
&lt;div class=&quot;source&quot; style=&quot;color: #000000; font-family: 'Courier New','Consolas','Lucida Console';&quot;&gt;&lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;type=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;id=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;input_test&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;value=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;input 提示测试&quot;&lt;/span&gt; &lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;2、引入 jQuery：&lt;/p&gt;
&lt;div class=&quot;source&quot; style=&quot;color: #000000; font-family: 'Courier New','Consolas','Lucida Console';&quot;&gt;&lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;type=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;src=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&lt;/span&gt;&lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;3、执行脚本：&lt;/p&gt;
&lt;div style='color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;,&quot;Consolas&quot;,&quot;Lucida Console&quot;;' class=&quot;source&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;var&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;inputEl&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;#input_test&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;),&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;defVal&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;inputEl&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;val&lt;/span&gt;();&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;inputEl&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;bind&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;({&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;focus&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;var&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;this&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;if&lt;/span&gt; (&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;val&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;==&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;defVal&lt;/span&gt;) &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;val&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;&amp;#39;&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;},&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;blur&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;var&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;this&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;if&lt;/span&gt; (&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;val&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;==&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;&amp;#39;&lt;/span&gt;) &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;_this&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;val&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;defVal&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;});&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;})&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;实现的最终效果是一样一样的，或许是我个人的代码洁癖，但我相信，好代码从细节开始！&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/blur/&quot; title=&quot;blur&quot; rel=&quot;tag&quot;&gt;blur&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/focus/&quot; title=&quot;focus&quot; rel=&quot;tag&quot;&gt;focus&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/input/&quot; title=&quot;input&quot; rel=&quot;tag&quot;&gt;input&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/jquery/&quot; title=&quot;jQuery&quot; rel=&quot;tag&quot;&gt;jQuery&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/w3c/&quot; title=&quot;W3C&quot; rel=&quot;tag&quot;&gt;W3C&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/marquee-scroll.html&quot; rel=&quot;bookmark&quot; title=&quot;基于 jQuery 的图片/文字无缝滚动&quot;&gt;基于 jQuery 的图片/文字无缝滚动&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年12月20日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-highslide-on-demand.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery 按需加载 HighSlide 效果&quot;&gt;jQuery 按需加载 HighSlide 效果&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年10月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-slide-loaded-on-demand.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery 按需加载轮播图&quot;&gt;jQuery 按需加载轮播图&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年09月26日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/ajax-get-in-jquery.html&quot; rel=&quot;bookmark&quot; title=&quot;用 jQuery 实现异步跨域请求&quot;&gt;用 jQuery 实现异步跨域请求&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年09月6日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538459/wange/feedsky/s.gif?r=http://wange.im/input-focus-blur-text.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/input-focus-blur-text.html/feed</wfw:commentRss><slash:comments>1</slash:comments><description>这个标题可能比较拗口不好理解，但是我相信所有的人都见过这个效果，大家可以看本站右上角的搜索输入框，默认显示着“输入搜索内容”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“输入搜索内容”的提示。是不是很常见？很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的： &amp;#60;input type=&quot;text&quot; value=&quot;不推荐这么做&quot; onfocus=&quot;if(this.value == '不推荐这么做') this.value = ''&quot; onblur=&quot;if(this.value == '') this.value = '不推荐这么做'&quot; /&amp;#62; 我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为： 1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？ 2、如果要修改其中的提示文字，费时费力又不好维护。 3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。 那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？ 相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 DEMO，具体方法如下： 1、html 部分： &amp;#60;input type=&quot;text&quot; id=&quot;input_test&quot; value=&quot;input 提示测试&quot; /&amp;#62; 2、引入 jQuery： [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538459/wange/feedsky/s.gif?r=http://wange.im/input-focus-blur-text.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>jQuery</category><category>blur</category><category>input</category><category>focus</category><category>W3C</category><category>电脑网络</category><pubDate>Sat, 05 May 2012 08:26:50 +0800</pubDate><author>万戈</author><comments>http://wange.im/input-focus-blur-text.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5292</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/input-focus-blur-text.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538459/6680522</fs:itemid></item><item><title>万戈牌 WordPress 搜索自动匹配提示标签关键词</title><link>http://wange.im/wg-tags-tip.html</link><content:encoded>&lt;p&gt;前两天逛卢松松的博客，他的一篇文章《打造一个名博需要多久》中把我归类为长草的名博，唉哟，我还算是名博，心里暗爽，但怎么就长草了呢？长草啊，草啊！有木有？！&lt;/p&gt;
&lt;p&gt;也确实，很久没有更新过了，不过今天写的这篇文章希望足够能帮我“除草”。文章名字很长，&lt;strong&gt;万戈牌 WordPress 搜索自动匹配提示标签关键词&lt;/strong&gt;。到底是个啥呢？客官们可以先试用一下本站右上角的搜索框，输入一些关键词，没等你输入完应该就可以看到有一些相关的 keywords 显示出来了，相信大家对这个应该不陌生吧，Google、百度等所有搜索引擎都是这么做的，智能匹配搜索提示！&lt;/p&gt;
&lt;p&gt;想知道怎么实现的吗？先等我把废话说完，否则我绝对不会告诉你插件的下载地址就在文章末尾！&lt;/p&gt;
&lt;p&gt;大家知道，在 WordPress 我不是很提倡使用插件，主要是考虑到速度和性能等方面，不过这次我还是把这个 WordPress 搜索关键词提示的功能做成了插件的形式。主要是因为，要把这个方法用非插件的方式公开出来，恐怕又有一大半的人要来问我 jQuery 放在哪里？functions.php 没有咋办？所以考虑到这个功能的易用性和大众化，还是做成插件更好。&lt;/p&gt;
&lt;p&gt;&lt;img title=&quot;万戈牌 WordPress 搜索自动匹配提示标签关键词&quot; src=&quot;https://byfiles.storage.live.com/y1p6DVNSxiLjJW9dc8khSbYhYekigtIpFt3QUMNldtVbKfG7CIYre_cPVj4CZff3MT0CF_HpB3JBKc/wg-tags-tip.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;这个插件的特点在哪里？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;1、做插件的时候着重考虑了性能问题，当用户鼠标聚焦到搜索输入框的时候，才会异步去加载一些需要的脚本和请求（这就是传说中的按需加载），所以在不使用站内搜索的情况下，该插件不会带来速度和性能的影响，可以放心使用。&lt;/p&gt;
&lt;p&gt;2、支持匹配中文关键词（这是必须的啊！）&lt;/p&gt;
&lt;p&gt;3、支持方向键上、下以及回车的键盘快速选择。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;如何使用这个插件？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;1、上传后在 WordPress 后台启用这个插件即可。没有任何配置选项，不需要修改 WordPress 主题，全自动帮您搞定一切。插件嘛，不就是为了图个方便 &lt;img src='http://wange.im/wp-includes/images/smilies/icon_razz.gif' alt=':-P' class='wp-smiley' /&gt; &lt;/p&gt;
&lt;p&gt;2、这个真没有了……&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;我的主题启用这个插件无效，这是什么情况？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;1、检查一下您的原主题有没有 JS 错误，如果主题本身就报错，很有可能阻断&lt;strong&gt;万戈牌 WordPress 搜索自动匹配提示标签关键词插件&lt;/strong&gt;（这插件名字是不是起的太长了。。。）的 JS 执行。&lt;/p&gt;
&lt;p&gt;2、检查您的主题 header.php 中有没有 wp_head() 这个方法，本插件载入的脚本依赖于这个方法，如果没有请加上。&lt;/p&gt;
&lt;p&gt;3、检查您的 RP 值，不解释 ^_^&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;和其他插件或者功能冲突怎么办？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;暂时我还没有碰到这种情况，如果被您有幸碰到了，您可以自己修改插件以适合您的主题，如果还是有不良反应请参照以下声明第2点，谢谢。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;提示的颜色太丑了，我要怎么换？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;可以在插件目录下的 wg-tags-tip/style.css 文件里进行修改，也可以在您自己的主题的样式文件里覆盖重写样式。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;声明：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;1、仅在本地的几个主题上测试通过，不能模拟所有主题的情况，如有 Bug，欢迎反馈给我，我会及时修正，谢谢。&lt;/p&gt;
&lt;p&gt;2、该插件免费，属于非卖品，所以无售后服务，如需个性化地调整，概不接受，也不要拿付费诱惑我，我会酌情考虑的！&lt;/p&gt;
&lt;p&gt;让您久等了，最后献上万戈牌 WordPress 搜索自动匹配提示标签关键词插件的下载地址：&lt;a style=&quot;font-size: 30px;&quot; title=&quot;万戈牌 WordPress 搜索自动匹配提示标签关键词&quot; href=&quot;http://code.google.com/p/wg-tags-tip/downloads/list&quot; target=&quot;_blank&quot;&gt;wg-tags-tip&lt;/a&gt;&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/wg-tags-tip/&quot; title=&quot;wg-tags-tip&quot; rel=&quot;tag&quot;&gt;wg-tags-tip&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wordpress/&quot; title=&quot;WordPress&quot; rel=&quot;tag&quot;&gt;WordPress&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wange/&quot; title=&quot;万戈&quot; rel=&quot;tag&quot;&gt;万戈&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/keyword/&quot; title=&quot;关键词&quot; rel=&quot;tag&quot;&gt;关键词&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/plugins/&quot; title=&quot;插件&quot; rel=&quot;tag&quot;&gt;插件&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/search/&quot; title=&quot;搜索&quot; rel=&quot;tag&quot;&gt;搜索&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/tags/&quot; title=&quot;标签&quot; rel=&quot;tag&quot;&gt;标签&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/wg-ie6warn.html&quot; rel=&quot;bookmark&quot; title=&quot;WordPress 之万戈牌 Fuck IE6 插件&quot;&gt;WordPress 之万戈牌 Fuck IE6 插件&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年05月12日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/wange-plugin.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;为 WordPress 插件添加后台控制选项&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/control-panel-for-wordpress-plugin.html&quot; rel=&quot;bookmark&quot; title=&quot;为 WordPress 插件添加后台控制选项&quot;&gt;为 WordPress 插件添加后台控制选项&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年02月16日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/wg-toolbar.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;万戈牌工具条&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/wg-toolbar.html&quot; rel=&quot;bookmark&quot; title=&quot;万戈牌工具条&quot;&gt;万戈牌工具条&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年02月12日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/C3C8B704573706D9!566?filename=keyword-highlight.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;Wordpress 站内搜索高亮显示关键词&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/highlight-keywords-in-wordpress-search.html&quot; rel=&quot;bookmark&quot; title=&quot;Wordpress 站内搜索高亮显示关键词&quot;&gt;Wordpress 站内搜索高亮显示关键词&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年07月18日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538460/wange/feedsky/s.gif?r=http://wange.im/wg-tags-tip.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/wg-tags-tip.html/feed</wfw:commentRss><slash:comments>98</slash:comments><description>前两天逛卢松松的博客，他的一篇文章《打造一个名博需要多久》中把我归类为长草的名博，唉哟，我还算是名博，心里暗爽，但怎么就长草了呢？长草啊，草啊！有木有？！ 也确实，很久没有更新过了，不过今天写的这篇文章希望足够能帮我“除草”。文章名字很长，万戈牌 WordPress 搜索自动匹配提示标签关键词。到底是个啥呢？客官们可以先试用一下本站右上角的搜索框，输入一些关键词，没等你输入完应该就可以看到有一些相关的 keywords 显示出来了，相信大家对这个应该不陌生吧，Google、百度等所有搜索引擎都是这么做的，智能匹配搜索提示！ 想知道怎么实现的吗？先等我把废话说完，否则我绝对不会告诉你插件的下载地址就在文章末尾！ 大家知道，在 WordPress 我不是很提倡使用插件，主要是考虑到速度和性能等方面，不过这次我还是把这个 WordPress 搜索关键词提示的功能做成了插件的形式。主要是因为，要把这个方法用非插件的方式公开出来，恐怕又有一大半的人要来问我 jQuery 放在哪里？functions.php 没有咋办？所以考虑到这个功能的易用性和大众化，还是做成插件更好。 这个插件的特点在哪里？ 1、做插件的时候着重考虑了性能问题，当用户鼠标聚焦到搜索输入框的时候，才会异步去加载一些需要的脚本和请求（这就是传说中的按需加载），所以在不使用站内搜索的情况下，该插件不会带来速度和性能的影响，可以放心使用。 2、支持匹配中文关键词（这是必须的啊！） 3、支持方向键上、下以及回车的键盘快速选择。 如何使用这个插件？ 1、上传后在 WordPress 后台启用这个插件即可。没有任何配置选项，不需要修改 WordPress 主题，全自动帮您搞定一切。插件嘛，不就是为了图个方便 2、这个真没有了…… 我的主题启用这个插件无效，这是什么情况？ 1、检查一下您的原主题有没有 JS 错误，如果主题本身就报错，很有可能阻断万戈牌 WordPress 搜索自动匹配提示标签关键词插件（这插件名字是不是起的太长了。。。）的 JS 执行。 2、检查您的主题 header.php 中有没有 wp_head() 这个方法，本插件载入的脚本依赖于这个方法，如果没有请加上。 3、检查您的 RP 值，不解释 ^_^ 和其他插件或者功能冲突怎么办？ 暂时我还没有碰到这种情况，如果被您有幸碰到了，您可以自己修改插件以适合您的主题，如果还是有不良反应请参照以下声明第2点，谢谢。 提示的颜色太丑了，我要怎么换？ 可以在插件目录下的 wg-tags-tip/style.css 文件里进行修改，也可以在您自己的主题的样式文件里覆盖重写样式。 声明： 1、仅在本地的几个主题上测试通过，不能模拟所有主题的情况，如有 Bug，欢迎反馈给我，我会及时修正，谢谢。 2、该插件免费，属于非卖品，所以无售后服务，如需个性化地调整，概不接受，也不要拿付费诱惑我，我会酌情考虑的！ 让您久等了，最后献上万戈牌 WordPress 搜索自动匹配提示标签关键词插件的下载地址：wg-tags-tip 与 [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538460/wange/feedsky/s.gif?r=http://wange.im/wg-tags-tip.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>搜索</category><category>插件</category><category>wg-tags-tip</category><category>标签</category><category>关键词</category><category>电脑网络</category><category>万戈</category><category>WordPress</category><pubDate>Sat, 07 Apr 2012 14:45:44 +0800</pubDate><author>万戈</author><comments>http://wange.im/wg-tags-tip.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5275</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/wg-tags-tip.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538460/6680522</fs:itemid></item><item><title>原生 Javascript 版自动化焦点图</title><link>http://wange.im/javascript-automated-slide.html</link><content:encoded>&lt;p&gt;焦点图？又是焦点图！我已经写过好多个焦点图啊、轮播图啊神马的，比如说 &lt;a title=&quot;jQuery 按需加载轮播图&quot; href=&quot;http://wange.im/jquery-slide-loaded-on-demand.html&quot;&gt;jQuery 按需加载轮播图&lt;/a&gt;、&lt;a title=&quot;jQuery 实现的幻灯轮播效果&quot; href=&quot;http://wange.im/jquery-for-slide.html&quot;&gt;jQuery 实现的幻灯轮播效果&lt;/a&gt;。是的，但是每次都各不相同，各有特点，当然，今天写的这个也是比较另类的。特点有两个：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;第一，原生的 JavaScript，不依赖于任何 JS 库。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;在平时的开发过程中，我们已经太过于依赖 jQuery、YUI 之类的 JS 框架，框架当然是好东西，但是正因为如此，我们就丧失了很多接触到 JavaScript 深层次的机会，也使得实现一些小功能就要杀鸡用牛刀地把整个框架引进来。就像吃薯条我喜欢原味的一样，原生的 JavaScript 也有其诱人之处。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;第二，全自动化地焦点图。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;什么是全自动化的焦点图？想象一下你所需要的全自动化应该是什么样的，告诉我尺寸大小、轮播间隔时间、图片的以及链接的基本信息，还有放在哪个位置，然后我就给你生成一个焦点图。这太完美了，而不需要再调整样式啊什么乱七八糟的，对使用者来说，越简单越好，不是吗？&lt;/p&gt;
&lt;p&gt;基于以上两个出发点，这个原生 JavaScript 版的自动化焦点图功能就诞生了。请看 &lt;a title=&quot;原生 Javascript 版自动化焦点图&quot; href=&quot;http://wange.im/demo/automated-slide&quot;&gt;DEMO&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;呃……这 DEMO 里的图片还在用我两年前的轮播图的图片，有点寒酸，对不起观众啊，不过图片不是重点，请看代码。代码部分我就不在文章里贴出来了，有兴趣的朋友可以查看 DEMO 的源代码，我没有压缩过，注释也都还在，相信应该是比较明了的。&lt;/p&gt;
&lt;p&gt;调用这个方法也是相当简单，方法接受6个参数：&lt;br /&gt;
width: 560,    // 焦点图宽度（非必须，默认值自适应）&lt;br /&gt;
height: 250,   // 焦点图高度（非必须，默认值自适应）&lt;br /&gt;
auto: false,   // 是否自动切换（非必须，默认值 false）&lt;br /&gt;
interval: 3000,   // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）&lt;br /&gt;
targetId: 'slide',  // html 对应的焦点图 ID（必须）&lt;br /&gt;
data: [ ]   // 焦点图数据（必须）&lt;/p&gt;
&lt;p&gt;然后建一个和 targetId 值相同的空标签 ID 就可以了，你不用担心你的焦点图结构怎么写，因为在 JS 里会帮你完成这些，你也不用担心焦点图的样式怎么调整，因为在 JS 里也会为你解决这些困扰。&lt;/p&gt;
&lt;p&gt;那么这个可以为你完成一切的全自动，而且又是原生的 Javascript 焦点图，会不会特别庞大呢？我对这个 JS 压缩后，只有 4Kb，是不是也非常的小清新呢？想象一下，如果你用 jQuery 来实现一个同样功能的焦点图功能，咱们且不说焦点图所需耗费的 JS 大小，单说一个压缩过的 jQuery 1.7 就要 90K+，差距啊有木有！&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/javascript/&quot; title=&quot;Javascript&quot; rel=&quot;tag&quot;&gt;Javascript&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/slide/&quot; title=&quot;轮播图&quot; rel=&quot;tag&quot;&gt;轮播图&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-highslide-on-demand.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery 按需加载 HighSlide 效果&quot;&gt;jQuery 按需加载 HighSlide 效果&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年10月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-slide-loaded-on-demand.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery 按需加载轮播图&quot;&gt;jQuery 按需加载轮播图&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年09月26日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-js-ajax-pic.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery/JavaScript 实现的异步加载图片&quot;&gt;jQuery/JavaScript 实现的异步加载图片&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年04月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/ietester-version.html&quot; rel=&quot;bookmark&quot; title=&quot;最短最给力的 IE 版本判断脚本&quot;&gt;最短最给力的 IE 版本判断脚本&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年02月19日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538461/wange/feedsky/s.gif?r=http://wange.im/javascript-automated-slide.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/javascript-automated-slide.html/feed</wfw:commentRss><slash:comments>50</slash:comments><description>焦点图？又是焦点图！我已经写过好多个焦点图啊、轮播图啊神马的，比如说 jQuery 按需加载轮播图、jQuery 实现的幻灯轮播效果。是的，但是每次都各不相同，各有特点，当然，今天写的这个也是比较另类的。特点有两个： 第一，原生的 JavaScript，不依赖于任何 JS 库。 在平时的开发过程中，我们已经太过于依赖 jQuery、YUI 之类的 JS 框架，框架当然是好东西，但是正因为如此，我们就丧失了很多接触到 JavaScript 深层次的机会，也使得实现一些小功能就要杀鸡用牛刀地把整个框架引进来。就像吃薯条我喜欢原味的一样，原生的 JavaScript 也有其诱人之处。 第二，全自动化地焦点图。 什么是全自动化的焦点图？想象一下你所需要的全自动化应该是什么样的，告诉我尺寸大小、轮播间隔时间、图片的以及链接的基本信息，还有放在哪个位置，然后我就给你生成一个焦点图。这太完美了，而不需要再调整样式啊什么乱七八糟的，对使用者来说，越简单越好，不是吗？ 基于以上两个出发点，这个原生 JavaScript 版的自动化焦点图功能就诞生了。请看 DEMO。 呃……这 DEMO 里的图片还在用我两年前的轮播图的图片，有点寒酸，对不起观众啊，不过图片不是重点，请看代码。代码部分我就不在文章里贴出来了，有兴趣的朋友可以查看 DEMO 的源代码，我没有压缩过，注释也都还在，相信应该是比较明了的。 调用这个方法也是相当简单，方法接受6个参数： width: 560,    // 焦点图宽度（非必须，默认值自适应） height: 250,   // 焦点图高度（非必须，默认值自适应） auto: false,   // 是否自动切换（非必须，默认值 false） interval: 3000,   // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效） targetId: 'slide',  // html 对应的焦点图 ID（必须） data: [ ]   // [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538461/wange/feedsky/s.gif?r=http://wange.im/javascript-automated-slide.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>轮播图</category><category>Javascript</category><category>电脑网络</category><pubDate>Fri, 09 Mar 2012 19:39:37 +0800</pubDate><author>万戈</author><comments>http://wange.im/javascript-automated-slide.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5269</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/javascript-automated-slide.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538461/6680522</fs:itemid></item><item><title>辗转三国的巧克力</title><link>http://wange.im/chocolate-in-three-countries.html</link><content:encoded>&lt;p&gt;我已经无数次感谢过博客这个平台，给我带来了线上、线下这么多朋友。&lt;a title=&quot;Wis&quot; href=&quot;http://www.1nightrain.com/&quot; target=&quot;_blank&quot;&gt;Wis&lt;/a&gt; 就是其中一位，通过博客我们相识已经两年有余。从线上的交流发展到线下的见面，虽然是跨国的友情，但是总有话题维系着我们之间的联络。&lt;/p&gt;
&lt;p&gt;在过年的时候，Wis 去了瑞士旅游，还特地给我买了一盒瑞士巧克力，于是这盒巧克力开始了三个国家之间的来回旅行，纠结了一个月，我终于在今天收到了这份别致可口的礼物。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;巧克力第一站：瑞士。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;非常感谢 Wis，就算在瑞士旅游，也不忘了我这个远在中国大陆的朋友。因为 Wis 在新加坡，我只是在 Wis 来中国的时候和他见过区区几次。对 Wis 本人、他的项目、经历、各种，我只能用两个字来形容，靠谱！所以和 Wis 是相见恨晚，但也没想到他会给我从瑞士带来意外的 Surprise。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;巧克力第二站：新加坡。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;等过完年，Wis 就带着这盒精致地如艺术品般的巧克力带回了新加坡，于是巧克力经历了它的第一次跨洋的飞行。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;巧克力第三站：上海。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;熟悉我的朋友或许知道，我的家在上海，Wis 要给我送巧克力，但是终点站绝对不是就到此结束了的，曲折的还在后面。更熟悉我的朋友会知道，我是在杭州工作，只有周末会回上海。那天 Wis 恰巧来国内办事，但是恰巧那天我又有事没能在上海，与 Wis 错过了一面，巧克力也就和我擦肩而过了 T_T。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;巧克力第四站：新加坡。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;是的，这盒巧克力又跟着 Wis 飞洋过海，回到了新加坡。但是 Wis 仍然不放弃给我送巧克力，找了国际快递，让巧克力再一次飞来上海，送到我家。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;巧克力第五站：上海。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;终于，这次是终点站了，但是这次旅程特别曲折漫长。巧克力在国际快递的运送下，本月6日已经抵达国内，由 EMS 在国内转运，但是我却迟迟没有收到快递通知，就在我和 Wis 都以为巧克力已经被丢包的失望情绪下。我根据 Wis 提供的国际运单号，一路跟踪查询 EMS，就算丢包也要有个说法！&lt;/p&gt;
&lt;p&gt;今天，也就是距巧克力已经抵达国内的第13天后，我终于在信箱里收到了一封挂号信，让我去邮局取包裹，几经周折，终于迎来了这飞来飞去的巧克力，内牛满面啊有木有！&lt;/p&gt;
&lt;p&gt;下面和大家分享一下这别致的巧克力~~~~~~~~~~的照片 o(∩_∩)o&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://byfiles.storage.live.com/y1pVZUH6Y_je7nZ1cVFck6mS1GA5Ktw04SY-4qKI6cR1uiKVY7R_qun10ThTgPcnU0TgYcQQ2auzkM/chocolate2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://byfiles.storage.live.com/y1pnDEIVGq4Y7BZg7GDta03tQvqPler4FvZrBMbd8tbWS8NXcgvT0031l3X8fF6YH2Qjp6oX-ptfjQ/chocolate1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;感谢 Wis，感谢围观的群众 &lt;img src='http://wange.im/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /&gt; &lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/blog/&quot; title=&quot;博客&quot; rel=&quot;tag&quot;&gt;博客&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/2011-12-29_194903.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;2011 年终总结&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/2011-year-end-summary.html&quot; rel=&quot;bookmark&quot; title=&quot;2011 年终总结&quot;&gt;2011 年终总结&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年12月29日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/surprise-from-google.html&quot; rel=&quot;bookmark&quot; title=&quot;Google 赐予我的意外惊喜&quot;&gt;Google 赐予我的意外惊喜&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年11月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/lsfmold.html&quot; rel=&quot;bookmark&quot; title=&quot;双重有奖活动给力举办中！&quot;&gt;双重有奖活动给力举办中！&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年08月22日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/recent-essays.html&quot; rel=&quot;bookmark&quot; title=&quot;近期杂谈&quot;&gt;近期杂谈&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年08月13日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538462/wange/feedsky/s.gif?r=http://wange.im/chocolate-in-three-countries.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/chocolate-in-three-countries.html/feed</wfw:commentRss><slash:comments>85</slash:comments><description>我已经无数次感谢过博客这个平台，给我带来了线上、线下这么多朋友。Wis 就是其中一位，通过博客我们相识已经两年有余。从线上的交流发展到线下的见面，虽然是跨国的友情，但是总有话题维系着我们之间的联络。 在过年的时候，Wis 去了瑞士旅游，还特地给我买了一盒瑞士巧克力，于是这盒巧克力开始了三个国家之间的来回旅行，纠结了一个月，我终于在今天收到了这份别致可口的礼物。 巧克力第一站：瑞士。 非常感谢 Wis，就算在瑞士旅游，也不忘了我这个远在中国大陆的朋友。因为 Wis 在新加坡，我只是在 Wis 来中国的时候和他见过区区几次。对 Wis 本人、他的项目、经历、各种，我只能用两个字来形容，靠谱！所以和 Wis 是相见恨晚，但也没想到他会给我从瑞士带来意外的 Surprise。 巧克力第二站：新加坡。 等过完年，Wis 就带着这盒精致地如艺术品般的巧克力带回了新加坡，于是巧克力经历了它的第一次跨洋的飞行。 巧克力第三站：上海。 熟悉我的朋友或许知道，我的家在上海，Wis 要给我送巧克力，但是终点站绝对不是就到此结束了的，曲折的还在后面。更熟悉我的朋友会知道，我是在杭州工作，只有周末会回上海。那天 Wis 恰巧来国内办事，但是恰巧那天我又有事没能在上海，与 Wis 错过了一面，巧克力也就和我擦肩而过了 T_T。 巧克力第四站：新加坡。 是的，这盒巧克力又跟着 Wis 飞洋过海，回到了新加坡。但是 Wis 仍然不放弃给我送巧克力，找了国际快递，让巧克力再一次飞来上海，送到我家。 巧克力第五站：上海。 终于，这次是终点站了，但是这次旅程特别曲折漫长。巧克力在国际快递的运送下，本月6日已经抵达国内，由 EMS 在国内转运，但是我却迟迟没有收到快递通知，就在我和 Wis 都以为巧克力已经被丢包的失望情绪下。我根据 Wis 提供的国际运单号，一路跟踪查询 EMS，就算丢包也要有个说法！ 今天，也就是距巧克力已经抵达国内的第13天后，我终于在信箱里收到了一封挂号信，让我去邮局取包裹，几经周折，终于迎来了这飞来飞去的巧克力，内牛满面啊有木有！ 下面和大家分享一下这别致的巧克力~~~~~~~~~~的照片 o(∩_∩)o 感谢 Wis，感谢围观的群众 与 博客 相关的文章 2011 年终总结 2011年12月29日 Google 赐予我的意外惊喜 2011年11月10日 [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538462/wange/feedsky/s.gif?r=http://wange.im/chocolate-in-three-countries.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>博客</category><category>三言两语</category><pubDate>Sun, 19 Feb 2012 22:05:15 +0800</pubDate><author>万戈</author><comments>http://wange.im/chocolate-in-three-countries.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5256</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/chocolate-in-three-countries.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538462/6680522</fs:itemid></item><item><title>新年新气象，博客换新衣</title><link>http://wange.im/new-year-new-theme.html</link><content:encoded>&lt;p&gt;hi，大家好，你没有走错，这里是你们熟悉的万戈 - Life Studio 的博客，新年新气象，博客也要换新衣，距离上一个&lt;a title=&quot;万戈牌主题上线测试&quot; href=&quot;http://wange.im/wange-theme-beta.html&quot;&gt;万戈牌主题&lt;/a&gt;，已经整整过去一年了，估计大家看的也有审美疲劳了吧，也是时候换一套新皮肤。首先感谢这次主题的首席设计湿——&lt;a title=&quot;尘埃影像&quot; href=&quot;http://www.dvpoo.com/&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;尘埃&lt;/a&gt;老哥（大家不妨去看一下他的网站，也是我做的哟 ^_^），代码部分则由我亲自操刀，HIAHIA~~~&lt;/p&gt;
&lt;p&gt;不过，因为做这个主题的时间比较仓促，又想赶在新年前上线，很多功能还没有完成，真是对不起尘埃老哥的设计呀。大家可以看到，我整个侧边栏还没有做，为了不显得太空空荡荡，就填了一个广告（原来广告还能这么用，嘿嘿）；另外评论模块也没做，暂时用第三方的“评论啦”来代替，感觉也不错，但是昨天导入 WordPress 9W 多条评论的时候让我非常内桑，直到发文前，还在导入 ing....还有很多细枝末节的小功能，可以提升用户体验的就更没有时间做了，各种速度上的优化也只做了一半。所以这个主题。。。呃。。。正处于 beta 的 beta 阶段，拍砖请悠着点，谢谢。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://byfiles.storage.live.com/y1phwvKN02-9ZHI3COMoJ-CLjpzPNvFA9mitfA4iTHQITb5F5M8gpfjUVfZUszT_y5L-BxfVf2iGTE/screenshot.jpg&quot; alt=&quot;万戈牌主题&quot; /&gt;&lt;br /&gt;
当然，虽然说是各种cuo，但毕竟是&lt;strong&gt;万戈牌主题&lt;/strong&gt;，cuo 也要 cuo 的很有范儿！主题延用之前 HTML5 这是自不必说了，另外还加上了很潮的&lt;a title=&quot;关于微数据&quot; href=&quot;http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&amp;amp;answer=176035&amp;amp;topic=1088472&amp;amp;ctx=topic&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;微数据&lt;/a&gt;，让 SEO 尽显奢华，哈哈；在首页的最新文章功能还大胆使用了 AJAX 来异步获取文章，对用户体验应该不错；搜索还提供了关键词自动提示功能；还有很多隐蔽的亮点，大家有兴趣的慢慢找吧。&lt;/p&gt;
&lt;p&gt;欢迎各位对这个新主题提出宝贵意见，也欢迎大家来找碴，挑 bug。下午就要赶火车去了，主题的完善工作要等到年后来做了，因为我说了，&lt;a title=&quot;今年过节不上网！&quot; href=&quot;http://wange.im/no-internet-in-spring-festival.html&quot;&gt;今年过节不上网&lt;/a&gt;。好好过个年，别再为代码纠结了，哦耶~&lt;/p&gt;
&lt;p&gt;最后，预祝大家新年快乐，回家路上顺顺利利 \(^o^)/&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/html5/&quot; title=&quot;HTML5&quot; rel=&quot;tag&quot;&gt;HTML5&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wordpress/&quot; title=&quot;WordPress&quot; rel=&quot;tag&quot;&gt;WordPress&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wange/&quot; title=&quot;万戈&quot; rel=&quot;tag&quot;&gt;万戈&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/theme/&quot; title=&quot;主题&quot; rel=&quot;tag&quot;&gt;主题&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/wange-theme-beta.html&quot; rel=&quot;bookmark&quot; title=&quot;万戈牌主题上线测试&quot;&gt;万戈牌主题上线测试&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年01月4日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/html5-self-study.html&quot; rel=&quot;bookmark&quot; title=&quot;向 HTML5 发起自学挑战书&quot;&gt;向 HTML5 发起自学挑战书&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年11月8日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/about-dz-theme-pro-cp.html&quot; rel=&quot;bookmark&quot; title=&quot;关于 D&amp;#038;Z Theme Pro CP 付费主题&quot;&gt;关于 D&amp;#038;Z Theme Pro CP 付费主题&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年08月1日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/revised-edition-dz-theme-by-wange-2.html&quot; rel=&quot;bookmark&quot; title=&quot;万戈修订版 D&amp;#038;Z 主题（二）&quot;&gt;万戈修订版 D&amp;#038;Z 主题（二）&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2009年12月21日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538463/wange/feedsky/s.gif?r=http://wange.im/new-year-new-theme.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/new-year-new-theme.html/feed</wfw:commentRss><slash:comments>94</slash:comments><description>hi，大家好，你没有走错，这里是你们熟悉的万戈 - Life Studio 的博客，新年新气象，博客也要换新衣，距离上一个万戈牌主题，已经整整过去一年了，估计大家看的也有审美疲劳了吧，也是时候换一套新皮肤。首先感谢这次主题的首席设计湿——尘埃老哥（大家不妨去看一下他的网站，也是我做的哟 ^_^），代码部分则由我亲自操刀，HIAHIA~~~ 不过，因为做这个主题的时间比较仓促，又想赶在新年前上线，很多功能还没有完成，真是对不起尘埃老哥的设计呀。大家可以看到，我整个侧边栏还没有做，为了不显得太空空荡荡，就填了一个广告（原来广告还能这么用，嘿嘿）；另外评论模块也没做，暂时用第三方的“评论啦”来代替，感觉也不错，但是昨天导入 WordPress 9W 多条评论的时候让我非常内桑，直到发文前，还在导入 ing....还有很多细枝末节的小功能，可以提升用户体验的就更没有时间做了，各种速度上的优化也只做了一半。所以这个主题。。。呃。。。正处于 beta 的 beta 阶段，拍砖请悠着点，谢谢。 当然，虽然说是各种cuo，但毕竟是万戈牌主题，cuo 也要 cuo 的很有范儿！主题延用之前 HTML5 这是自不必说了，另外还加上了很潮的微数据，让 SEO 尽显奢华，哈哈；在首页的最新文章功能还大胆使用了 AJAX 来异步获取文章，对用户体验应该不错；搜索还提供了关键词自动提示功能；还有很多隐蔽的亮点，大家有兴趣的慢慢找吧。 欢迎各位对这个新主题提出宝贵意见，也欢迎大家来找碴，挑 bug。下午就要赶火车去了，主题的完善工作要等到年后来做了，因为我说了，今年过节不上网。好好过个年，别再为代码纠结了，哦耶~ 最后，预祝大家新年快乐，回家路上顺顺利利 \(^o^)/ 与 HTML5,WordPress,万戈,主题 相关的文章 万戈牌主题上线测试 2011年01月4日 向 HTML5 发起自学挑战书 2010年11月8日 关于 D&amp;#038;Z Theme Pro CP 付费主题 2010年08月1日 万戈修订版 D&amp;#038;Z 主题（二） 2009年12月21日&lt;img src=&quot;http://www1.feedsky.com/t1/634538463/wange/feedsky/s.gif?r=http://wange.im/new-year-new-theme.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>HTML5</category><category>主题</category><category>电脑网络</category><category>万戈</category><category>WordPress</category><pubDate>Fri, 20 Jan 2012 09:27:50 +0800</pubDate><author>万戈</author><comments>http://wange.im/new-year-new-theme.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5239</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/new-year-new-theme.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538463/6680522</fs:itemid></item><item><title>今年过节不上网！</title><link>http://wange.im/no-internet-in-spring-festival.html</link><content:encoded>&lt;p&gt;刚送走元旦，又要马上迎来春节，2012年的年初真是一个热闹喜庆的月份，那股春运带来的抢票潮让这个欢腾的一月份更加让人感觉到新年的临近。和大伙一样，这段时间前前后后，我也是张罗着采购春节年货、抢购飞机票、火车票，早早请好了年假准备回老家过年，长夜漫漫，归心似箭。&lt;/p&gt;
&lt;p&gt;不知道其他地区的朋友是怎么过年的，就我自己的感触来说，年味是一年不如一年。小时候过年，一大桌亲戚朋友围坐在一起，人太多的时候还要另外开一桌，吃完年夜饭就和小朋友们冲出门去放烟花爆竹，这爆竹声会在那一整夜此起彼浮，第二天推开门就可以看到一地的爆竹残骸，还有一阵扑鼻的硝烟味儿，那个味儿就是我印象深处的年味。&lt;/p&gt;
&lt;p&gt;但是现在，我可以想象我们“进化”了的过年方式。我们会拿着手机互相转发着从别人那里转发过来的祝福短信；我们会在微博上 @ N多的好友互相拜年；我们会在QQ群里和陌生人说一句新年快乐；然后眼睛一闭一睁，这一个新年就算过完了。&lt;/p&gt;
&lt;p&gt;并不是说哪种过年方式的好与不好。我想应该有很多宅男腐女和我一样，整天面对着电脑，生活就是网络，工作也是网络，家里是大大小小的屏幕，公司里也是大大小小的屏幕，甚至在路上还是各种大大小小的屏幕，我们人与人的交流越来越少，这年味也就越来越淡。你是习惯了这样的生活？还是被这样的生活所束缚着？&lt;/p&gt;
&lt;p&gt;今年过年我会回老家，那是一个没有网络，只有纯年味的地方。那时，我可以好好享受一下没有网络的清静日子，不用关心今天谁@了我，也不用关心还有多少工作没有完成。如果可以，我真心希望发起一个&lt;strong&gt;#今年过节不上网#&lt;/strong&gt;的活动，让大家放下心中的束缚，过一个纯静的新年。&lt;/p&gt;
&lt;p&gt;今年过节不上网，只能在这里提前给大家拜年，祝所有博友们在新的一年里PR上9，IP过万，广告被点爆！&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/2012/&quot; title=&quot;2012&quot; rel=&quot;tag&quot;&gt;2012&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/network/&quot; title=&quot;网络&quot; rel=&quot;tag&quot;&gt;网络&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/ifttt.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;衣服脱脱脱，越脱越精彩&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/ifttt.html&quot; rel=&quot;bookmark&quot; title=&quot;衣服脱脱脱，越脱越精彩&quot;&gt;衣服脱脱脱，越脱越精彩&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年07月3日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/recommended-sites.html&quot; rel=&quot;bookmark&quot; title=&quot;常逛网站五星推荐&quot;&gt;常逛网站五星推荐&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年05月25日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/angryshoes.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;一只背负着全国网民尊严的鞋&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/fuck-fang-bin-xing.html&quot; rel=&quot;bookmark&quot; title=&quot;一只背负着全国网民尊严的鞋&quot;&gt;一只背负着全国网民尊严的鞋&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年05月20日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/hot-in-internet.html&quot; rel=&quot;bookmark&quot; title=&quot;互联网的冬天不太冷&quot;&gt;互联网的冬天不太冷&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年12月20日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538464/wange/feedsky/s.gif?r=http://wange.im/no-internet-in-spring-festival.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/no-internet-in-spring-festival.html/feed</wfw:commentRss><slash:comments>44</slash:comments><description>刚送走元旦，又要马上迎来春节，2012年的年初真是一个热闹喜庆的月份，那股春运带来的抢票潮让这个欢腾的一月份更加让人感觉到新年的临近。和大伙一样，这段时间前前后后，我也是张罗着采购春节年货、抢购飞机票、火车票，早早请好了年假准备回老家过年，长夜漫漫，归心似箭。 不知道其他地区的朋友是怎么过年的，就我自己的感触来说，年味是一年不如一年。小时候过年，一大桌亲戚朋友围坐在一起，人太多的时候还要另外开一桌，吃完年夜饭就和小朋友们冲出门去放烟花爆竹，这爆竹声会在那一整夜此起彼浮，第二天推开门就可以看到一地的爆竹残骸，还有一阵扑鼻的硝烟味儿，那个味儿就是我印象深处的年味。 但是现在，我可以想象我们“进化”了的过年方式。我们会拿着手机互相转发着从别人那里转发过来的祝福短信；我们会在微博上 @ N多的好友互相拜年；我们会在QQ群里和陌生人说一句新年快乐；然后眼睛一闭一睁，这一个新年就算过完了。 并不是说哪种过年方式的好与不好。我想应该有很多宅男腐女和我一样，整天面对着电脑，生活就是网络，工作也是网络，家里是大大小小的屏幕，公司里也是大大小小的屏幕，甚至在路上还是各种大大小小的屏幕，我们人与人的交流越来越少，这年味也就越来越淡。你是习惯了这样的生活？还是被这样的生活所束缚着？ 今年过年我会回老家，那是一个没有网络，只有纯年味的地方。那时，我可以好好享受一下没有网络的清静日子，不用关心今天谁@了我，也不用关心还有多少工作没有完成。如果可以，我真心希望发起一个#今年过节不上网#的活动，让大家放下心中的束缚，过一个纯静的新年。 今年过节不上网，只能在这里提前给大家拜年，祝所有博友们在新的一年里PR上9，IP过万，广告被点爆！ 与 2012,网络 相关的文章 衣服脱脱脱，越脱越精彩 2011年07月3日 常逛网站五星推荐 2011年05月25日 一只背负着全国网民尊严的鞋 2011年05月20日 互联网的冬天不太冷 2010年12月20日&lt;img src=&quot;http://www1.feedsky.com/t1/634538464/wange/feedsky/s.gif?r=http://wange.im/no-internet-in-spring-festival.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>网络</category><category>三言两语</category><category>2012</category><pubDate>Tue, 17 Jan 2012 21:48:32 +0800</pubDate><author>万戈</author><comments>http://wange.im/no-internet-in-spring-festival.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5229</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/no-internet-in-spring-festival.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538464/6680522</fs:itemid></item><item><title>2011 年终总结</title><link>http://wange.im/2011-year-end-summary.html</link><content:encoded>&lt;p&gt;昨天刚过完生日，明天就要送走2011年的最后一天，所以每次过生日都会感觉岁月毫不留情地在瞬间把我拉扯大了，连一点缓冲的余地也没有给我留下。2011年是我人生的一大转折点，我很享受这一年的过程，也很留恋这一年，但是最终还是不得不送走这让人依依不舍的2011年。&lt;/p&gt;
&lt;p&gt;要把整整一年的话题浓缩在一篇文章里，真是千言万语，简单点就从以下几个方面谈谈。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;技术：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;从捣鼓博客起家的一个业余代码爱好者，转变为一个专业的程序猿。在这一年技术上的成长，无疑是一个质的飞跃。之前就有很多人对我转行的行为表示质疑，包括我的父母，一个学文科的想写代码？疯了吧？也有人说，当我把这一门兴趣转变为工作后，只会磨灭我的兴趣。不过就现在看来，当初对我有质疑的朋友们，感谢你们的激励，让我有动力不断证明我选择了一条正确的道路，我比从前更喜欢这个行业，难以自拔了。&lt;/p&gt;
&lt;p&gt;越深入了解前端这个行业，就越发现自己技术实力的薄弱，恨不得能把一天掰成两半两花，我需要更快地成长起来，我需要更多质的飞跃，我需要突破自己的瓶颈。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;博客：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;说到博客，我就心中有愧。这个博客曾是我引以为傲的平台，是博客，让我认识到了这么多海内外、线上线下的朋友；是博客，引领我进入挨踢这个专业领域，让我堂堂正正写起代码；也是博客，让我有一个倾诉、发泄、交流的地方。但是这一年，特别是后半年，我把更多的时间投入了工作、生活、感情中，博客的使命不至于此，博客，我还会回来的！&lt;/p&gt;
&lt;p&gt;根据前两年的惯例，我还是贴一些今年博客的一些数据：&lt;/p&gt;
&lt;p&gt;PR = 4，Alexa = 4W+，和去年比，PR 值是没变，Alexa 值下跌了 1 万，这个在我意料之外，今年都没怎么更新博客，Alexa 居然只跌了 1 万，还要感谢广大博客们长期以来对小站的支持，这更让我这个博主感到惭愧。&lt;/p&gt;
&lt;p&gt;&lt;img title=&quot;&quot; src=&quot;http://byfiles.storage.live.com/y1p1s2MK0PAd_CNjZ5riIpBpuG2ZU8jEh2yQYWGaHyU2FiGzEI3PWcMCcbPp6GscDQ8BhcCedfmWnM/2011-12-29_194903.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;这是我刚刚在 WordPress 后台控制台（现在应该叫“仪表盘”了，有点不习惯）截的图，比去年这个时候多了 128 篇文章，2W+ 条评论，我就不评价这个数字多还是少了，用心写了每一篇文章，也感谢每一条评论的博友们。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;生活：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;去年闲的蛋疼，去报了一个研究生，当时也没料到今年这一年会忙到这么火爆。所以这研究生有点荒废了，很可惜，但是权衡工作和兴趣，研究生权当是生活的调味品，毕竟也认识了一群年长我很多的哥哥姐姐辈，甚至是叔叔阿姨辈的朋友们。曾经拥有，这一点，我知足了。&lt;/p&gt;
&lt;p&gt;另外，还有本年度最大的收获，亲耐滴依灵作为我的女朋友，出现在我忙碌却又平淡的代码生活中。感谢她一直以来对我的支持，无论是我的工作还是生活，即使我加班到凌晨，她都会守在电话的那一头等我；在我生日的那一天，她还特地请假，风尘仆仆赶到我所在的城市给我庆生。这一点，我也知足了。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;目标：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;每年这个时候，我都会回顾一下这一年的成长、失败、经验……各方面的，就像在写下这篇文章之前，我又重温了一下&lt;a title=&quot;2009 年终总结&quot; href=&quot;http://wange.im/2009-year-end-summary.html&quot;&gt;前年&lt;/a&gt;、&lt;a title=&quot;2010 年终总结&quot; href=&quot;http://wange.im/2010-year-end-summary.html&quot;&gt;去年&lt;/a&gt;这个时候的总结，有苦也有甜，冷暖自知。这不是工作报告，不用在意老板怎么看；这不是作文，没有字数体裁限制；这不是思想总结，不用违心地宣扬自己的情操有多高尚。这只是一个总结，当我明年再来回顾这篇总结的时候，我希望我能会心地笑着对自己说，你又成长了。我的目标就是这么简单。&lt;/p&gt;
&lt;p&gt;2011年，走好，我一定会想你的。&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/2011/&quot; title=&quot;2011&quot; rel=&quot;tag&quot;&gt;2011&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wordpress/&quot; title=&quot;WordPress&quot; rel=&quot;tag&quot;&gt;WordPress&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/blog/&quot; title=&quot;博客&quot; rel=&quot;tag&quot;&gt;博客&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/summary/&quot; title=&quot;总结&quot; rel=&quot;tag&quot;&gt;总结&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/cpanel.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;2010 博客总结&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/2010-blog-summary.html&quot; rel=&quot;bookmark&quot; title=&quot;2010 博客总结&quot;&gt;2010 博客总结&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年12月27日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/wange.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;2009 博客总结&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/2009-blog-summary.html&quot; rel=&quot;bookmark&quot; title=&quot;2009 博客总结&quot;&gt;2009 博客总结&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2009年12月27日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/recent-essays.html&quot; rel=&quot;bookmark&quot; title=&quot;近期杂谈&quot;&gt;近期杂谈&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年08月13日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/mood.jpg&quot; alt=&quot;三言两语&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/blog-is-growing-up.html&quot; rel=&quot;bookmark&quot; title=&quot;博客也在成长&quot;&gt;博客也在成长&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年12月19日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538465/wange/feedsky/s.gif?r=http://wange.im/2011-year-end-summary.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/2011-year-end-summary.html/feed</wfw:commentRss><slash:comments>125</slash:comments><description>昨天刚过完生日，明天就要送走2011年的最后一天，所以每次过生日都会感觉岁月毫不留情地在瞬间把我拉扯大了，连一点缓冲的余地也没有给我留下。2011年是我人生的一大转折点，我很享受这一年的过程，也很留恋这一年，但是最终还是不得不送走这让人依依不舍的2011年。 要把整整一年的话题浓缩在一篇文章里，真是千言万语，简单点就从以下几个方面谈谈。 技术： 从捣鼓博客起家的一个业余代码爱好者，转变为一个专业的程序猿。在这一年技术上的成长，无疑是一个质的飞跃。之前就有很多人对我转行的行为表示质疑，包括我的父母，一个学文科的想写代码？疯了吧？也有人说，当我把这一门兴趣转变为工作后，只会磨灭我的兴趣。不过就现在看来，当初对我有质疑的朋友们，感谢你们的激励，让我有动力不断证明我选择了一条正确的道路，我比从前更喜欢这个行业，难以自拔了。 越深入了解前端这个行业，就越发现自己技术实力的薄弱，恨不得能把一天掰成两半两花，我需要更快地成长起来，我需要更多质的飞跃，我需要突破自己的瓶颈。 博客： 说到博客，我就心中有愧。这个博客曾是我引以为傲的平台，是博客，让我认识到了这么多海内外、线上线下的朋友；是博客，引领我进入挨踢这个专业领域，让我堂堂正正写起代码；也是博客，让我有一个倾诉、发泄、交流的地方。但是这一年，特别是后半年，我把更多的时间投入了工作、生活、感情中，博客的使命不至于此，博客，我还会回来的！ 根据前两年的惯例，我还是贴一些今年博客的一些数据： PR = 4，Alexa = 4W+，和去年比，PR 值是没变，Alexa 值下跌了 1 万，这个在我意料之外，今年都没怎么更新博客，Alexa 居然只跌了 1 万，还要感谢广大博客们长期以来对小站的支持，这更让我这个博主感到惭愧。 这是我刚刚在 WordPress 后台控制台（现在应该叫“仪表盘”了，有点不习惯）截的图，比去年这个时候多了 128 篇文章，2W+ 条评论，我就不评价这个数字多还是少了，用心写了每一篇文章，也感谢每一条评论的博友们。 生活： 去年闲的蛋疼，去报了一个研究生，当时也没料到今年这一年会忙到这么火爆。所以这研究生有点荒废了，很可惜，但是权衡工作和兴趣，研究生权当是生活的调味品，毕竟也认识了一群年长我很多的哥哥姐姐辈，甚至是叔叔阿姨辈的朋友们。曾经拥有，这一点，我知足了。 另外，还有本年度最大的收获，亲耐滴依灵作为我的女朋友，出现在我忙碌却又平淡的代码生活中。感谢她一直以来对我的支持，无论是我的工作还是生活，即使我加班到凌晨，她都会守在电话的那一头等我；在我生日的那一天，她还特地请假，风尘仆仆赶到我所在的城市给我庆生。这一点，我也知足了。 目标： 每年这个时候，我都会回顾一下这一年的成长、失败、经验……各方面的，就像在写下这篇文章之前，我又重温了一下前年、去年这个时候的总结，有苦也有甜，冷暖自知。这不是工作报告，不用在意老板怎么看；这不是作文，没有字数体裁限制；这不是思想总结，不用违心地宣扬自己的情操有多高尚。这只是一个总结，当我明年再来回顾这篇总结的时候，我希望我能会心地笑着对自己说，你又成长了。我的目标就是这么简单。 2011年，走好，我一定会想你的。 与 2011,WordPress,博客,总结 相关的文章 2010 博客总结 2010年12月27日 2009 博客总结 2009年12月27日 近期杂谈 2011年08月13日 博客也在成长 2010年12月19日&lt;img src=&quot;http://www1.feedsky.com/t1/634538465/wange/feedsky/s.gif?r=http://wange.im/2011-year-end-summary.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>博客</category><category>2011</category><category>三言两语</category><category>总结</category><category>WordPress</category><pubDate>Thu, 29 Dec 2011 20:53:41 +0800</pubDate><author>万戈</author><comments>http://wange.im/2011-year-end-summary.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5223</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/2011-year-end-summary.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538465/6680522</fs:itemid></item><item><title>基于 jQuery 的图片/文字无缝滚动</title><link>http://wange.im/marquee-scroll.html</link><content:encoded>&lt;p&gt;你知道 jQuery，你也知道图片滚动的效果，但是你知道啥叫无缝滚动不？无缝滚动，就是无缝的滚动！换句话说，无缝滚动就是，图片或者文字下一张下一张地滚动，当滚动到屁股的时候就看到头了，反过来，当滚动到头的时候又能看到屁股了。还是看 &lt;a title=&quot;jQuery 无缝滚动&quot; href=&quot;http://wange.im/demo/marquee/&quot;&gt;DEMO&lt;/a&gt; 吧，或许更好理解一些。如你所见，当作为一排图片展示的时候，无缝滚动可以让人有无尽的感觉，页面一下子就充实了。&lt;/p&gt;
&lt;p&gt;因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。&lt;/p&gt;
&lt;p&gt;HTML 部分：&lt;/p&gt;
&lt;div style='color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;,&quot;Consolas&quot;,&quot;Lucida Console&quot;;' class=&quot;source&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;scroll_area&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;scroll_list&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;ul&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;scroll_ul&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;1&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;2&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;3&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;4&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;5&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;6&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;7&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;8&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;9&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;id=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;prev&amp;quot;&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;btn_icon&amp;quot;&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;href=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;javascript:;&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;gt;&lt;/span&gt;上一个&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;a&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;id=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;next&amp;quot;&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;class=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;btn_icon&amp;quot;&lt;/span&gt; &lt;span style=&quot;color: rgb(255, 0, 0);&quot;&gt;href=&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;quot;javascript:;&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;gt;&lt;/span&gt;下一个&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;jQuery 部分：&lt;/p&gt;
&lt;div style='color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;,&quot;Consolas&quot;,&quot;Lucida Console&quot;;' class=&quot;source&quot;&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//配置变量&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;var&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;config&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;showNum&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;3&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//设置滚动的显示个数&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;autoScroll&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;false&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//是否自动滚动，默认为 false&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;autoScrollInterval&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;3000&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//自动滚动间隔，默认为 3000 毫秒，autoScroll = true 时才有效&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;var&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul li&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;outerWidth&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;true&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;),&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//单个 li 的宽度&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//.scroll_ul 初使化时的 left 值为 0&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;prevAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;true&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//为了防止连续点击上一页按钮&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;nextAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;true&lt;/span&gt;;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//为了防止连续点击下一页按钮&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//计算父容量限宽&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_list&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;width&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;config&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;showNum&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;*&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt;);&lt;/p&gt;
&lt;p&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//点击上一页&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;#prev&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;click&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;if&lt;/span&gt; (&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;prevAllow&lt;/span&gt;) &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;prevAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;false&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;css&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;left&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//复制最后一个 li 并插入到 ul 的最前面&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul li:last&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;clone&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;().&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;prependTo&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//删除最后一个 li&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul li:last&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;remove&lt;/span&gt;();&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;animate&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;({&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;left&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;+&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;},&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;300&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;parseInt&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;css&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;left&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;),&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;10&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;prevAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;true&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;})&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;});&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//点击下一页&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;#next&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;click&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;if&lt;/span&gt; (&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;nextAllow&lt;/span&gt;) &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;nextAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;false&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;animate&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;({&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;left&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;:&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;},&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;300&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;parseInt&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;css&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;left&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;),&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;10&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;+&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlWidth&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;css&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;left&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;,&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;scrollUlLeft&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//复制第一个 li 并插入到 ul 的最后面&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul li:first&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;clone&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;().&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;appendTo&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul&amp;#39;&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//删除第一个 li&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;.scroll_ul li:first&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;remove&lt;/span&gt;();&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;nextAllow&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;true&lt;/span&gt;;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;})&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;});&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 136, 0); font-style: italic;&quot;&gt;//自动滚动&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;if&lt;/span&gt; (&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;config&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;autoScroll&lt;/span&gt;) &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;setInterval&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 128); font-weight: bold;&quot;&gt;function&lt;/span&gt;() &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;{&lt;/span&gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;$&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;#next&amp;#39;&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;trigger&lt;/span&gt;(&lt;span style=&quot;color: rgb(0, 0, 255);&quot;&gt;&amp;#39;click&amp;#39;&lt;/span&gt;);&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;},&lt;/span&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;config&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;autoScrollInterval&lt;/span&gt;)&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;}&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: rgb(0, 0, 0);&quot;&gt;})&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/jquery/&quot; title=&quot;jQuery&quot; rel=&quot;tag&quot;&gt;jQuery&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/picture/&quot; title=&quot;图片&quot; rel=&quot;tag&quot;&gt;图片&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/marquee-scroll/&quot; title=&quot;无缝滚动&quot; rel=&quot;tag&quot;&gt;无缝滚动&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-highslide-on-demand.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery 按需加载 HighSlide 效果&quot;&gt;jQuery 按需加载 HighSlide 效果&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年10月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-js-ajax-pic.html&quot; rel=&quot;bookmark&quot; title=&quot;jQuery/JavaScript 实现的异步加载图片&quot;&gt;jQuery/JavaScript 实现的异步加载图片&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年04月10日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/fadeto-effect-with-jquery.html&quot; rel=&quot;bookmark&quot; title=&quot;利用 JQuery 实现图片显隐特效&quot;&gt;利用 JQuery 实现图片显隐特效&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年04月8日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/jquery-slide-pic-show.html&quot; rel=&quot;bookmark&quot; title=&quot;JQuery 实现带滑动层的图片展示效果&quot;&gt;JQuery 实现带滑动层的图片展示效果&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2010年02月24日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538466/wange/feedsky/s.gif?r=http://wange.im/marquee-scroll.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/marquee-scroll.html/feed</wfw:commentRss><slash:comments>33</slash:comments><description>你知道 jQuery，你也知道图片滚动的效果，但是你知道啥叫无缝滚动不？无缝滚动，就是无缝的滚动！换句话说，无缝滚动就是，图片或者文字下一张下一张地滚动，当滚动到屁股的时候就看到头了，反过来，当滚动到头的时候又能看到屁股了。还是看 DEMO 吧，或许更好理解一些。如你所见，当作为一排图片展示的时候，无缝滚动可以让人有无尽的感觉，页面一下子就充实了。 因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。 HTML 部分： &amp;#60;div class=&amp;#34;scroll_area&amp;#34;&amp;#62; &amp;#160;&amp;#160;&amp;#160; &amp;#60;div class=&amp;#34;scroll_list&amp;#34;&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;ul class=&amp;#34;scroll_ul&amp;#34;&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;1&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;2&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;3&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;4&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;5&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;6&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;7&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;8&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;li&amp;#62;9&amp;#60;/li&amp;#62; &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160; &amp;#60;/ul&amp;#62; &amp;#160;&amp;#160;&amp;#160; &amp;#60;/div&amp;#62; &amp;#160;&amp;#160;&amp;#160; &amp;#60;a id=&amp;#34;prev&amp;#34; class=&amp;#34;btn_icon&amp;#34; href=&amp;#34;javascript:;&amp;#34;&amp;#62;上一个&amp;#60;/a&amp;#62; &amp;#160;&amp;#160;&amp;#160; &amp;#60;a id=&amp;#34;next&amp;#34; class=&amp;#34;btn_icon&amp;#34; href=&amp;#34;javascript:;&amp;#34;&amp;#62;下一个&amp;#60;/a&amp;#62; &amp;#60;/div&amp;#62; jQuery 部分： $(function() [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538466/wange/feedsky/s.gif?r=http://wange.im/marquee-scroll.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>jQuery</category><category>无缝滚动</category><category>图片</category><category>电脑网络</category><pubDate>Tue, 20 Dec 2011 23:14:53 +0800</pubDate><author>万戈</author><comments>http://wange.im/marquee-scroll.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5213</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/marquee-scroll.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538466/6680522</fs:itemid></item><item><title>智通人才网——手机客户端</title><link>http://wange.im/job5156.html</link><content:encoded>&lt;p&gt;21世纪什么最重要？人才！就在各大企业忙着搜罗人才的同时，也是你展现自我，绽放光芒的大好机会。而我们知道，好马配好鞍，有了好鞍我们也就事半功倍了。有朋友就推荐给我这样一个“好鞍”——&lt;a href=&quot;http://app.job5156.com/&quot; title=&quot;智通手机客户端&quot; target=&quot;_blank&quot;&gt;智通手机客户端&lt;/a&gt;，有了它，我们就可以无忧无虑找工作，随时随地好“薪”情。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;智通手机客户端有什么用？&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;或许你刚踏出学校的大门，正在为寻找一份合适的工作发愁；或许你对现在的工作状态厌倦了，想换一个工作环境；或许你正需要一个更高更好的提升空间；或许现在的工作无法让你尽情地发挥能力所长……&lt;strong&gt;智通手机客户端&lt;/strong&gt;（&lt;a href=&quot;http://app.job5156.com/&quot; title=&quot;智通手机客户端&quot; target=&quot;_blank&quot;&gt;http://app.job5156.com/&lt;/a&gt;）一定会对你有所帮助。&lt;/p&gt;
&lt;p&gt;智通手机客户端集成了网站最新职位信息，并提供最贴心的求职服务与指导，为您实现随时随地找工作的便利，个性定制职位的精确推送，最新最及时的招聘会信息，还有最专业全面的求职指导。轻松求职，尽在掌握！&lt;/p&gt;
&lt;p&gt;经朋友推荐，我在自己的手机上安装了 android 版本的智通人才的手机应用试用了一下，感觉智通人才手机应用的功能非常全面，操作也很简单快捷，界面简洁友好，而且可以关联或者注册在智通人才招聘网的帐号，方便随时随地管理你的简历以及查看最新职位信息。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;智通人才手机应用主要包括以下功能：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img style=&quot;float: left;&quot; src=&quot;http://byfiles.storage.live.com/y1ppwoeDLTzh4xyJDAPT9aqXpUQUXG5LNepniXIBqR9_yrI8hR52KyVy37_6xONvY-CKVzJYrewBq0/1323524765805.jpg&quot; alt=&quot;&quot; /&gt;1、职位、公司搜索&lt;/p&gt;
&lt;p&gt;这是智通人才手机应用的核心功能，界面简洁，但是功能俱全。我们可以通过职位、公司、地点、信息发布时间等组合条件查找匹配的招聘信息。最近的组合搜索条件会被保存在下面的历史记录中，就像一个快捷方式，以方便用户再次迅速定位到有意向的搜索条件。&lt;/p&gt;
&lt;p&gt;2、校园招聘&lt;/p&gt;
&lt;p&gt;校园招聘是智通人才手机应用的一大特色功能。主要针对寻求实习机会的在校学生，或者刚踏出校门的应届毕业生。这一贴心的功能切实解决，或者说缓解了应届生求职难的呼声。以同样的搜索条件，我们可以在“校园招聘”栏里找到更多接受在校学生、应届毕业生的招聘信息，相信对于渴望一份合适工作的学生朋友们这绝对是个福音。&lt;/p&gt;
&lt;p&gt;3、招聘会信息&lt;/p&gt;
&lt;p&gt;也有一些用户暂时没有求职意向，又或者只是处于观望态度的朋友们，或许会对资讯信息这个版块更感兴趣。在这里，你可以根据指定的场馆搜索条件订阅到所观注的职场信息以及动态，让你随时随地把握住市场的最新情况。&lt;/p&gt;
&lt;p&gt;4、简历管理&lt;/p&gt;
&lt;p&gt;智通手机客户端不仅仅可以搜索职位信息，还可以关联你在智通招聘网上的账户，这样就可以随时了解你的简历状态，比如说有谁看过你的简历？有谁正邀请你面试？你申请过的职位等等，以便及时在第一时间作出响应。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;智通人才手机应用的优势：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img style=&quot;float: left;&quot; src=&quot;http://by1.storage.live.com/items/C3C8B704573706D9!674:ConstantWidth228/1323525414575.jpg&quot; alt=&quot;&quot; /&gt;1、快速、便捷&lt;/p&gt;
&lt;p&gt;智通人才手机应用同时支持 Android、iPhone 以及 wap 三个版本，换句话说，只要你的手机能够上网，就可以轻松便捷地使用智通手机客户端。&lt;/p&gt;
&lt;p&gt;2、全面、精确&lt;/p&gt;
&lt;p&gt;每次筛选职位后，用户进入搜索结果页还可以通过右侧的小箭头找到二次搜索框，在这里我们可以在海量的搜索结果中通过学历、经验、姓别等筛选条件进一步精确定位到自己中意的职位或者公司，这是一个相当人性化的设置。&lt;/p&gt;
&lt;p&gt;3、个性、贴心&lt;/p&gt;
&lt;p&gt;关联智通的账户后，智通人才手机应用会向你个性化地推送你所关注的职位信息，还有最贴心的求职指导，最新全面的求职动态。另外还有个性化的皮肤设置，缓存管理等等。&lt;/p&gt;
&lt;p&gt;4、友好、易用&lt;/p&gt;
&lt;p&gt;智通手机的界面交互设计都非常友好，操作也相当顺手，无论是在查询速度、账户管理、应聘分享上都有很好的用户体验。&lt;/p&gt;
&lt;p&gt;5、免费、小巧&lt;/p&gt;
&lt;p&gt;下载和使用智通人才手机客户端是完全免费的，只需承担流量的费用即可，如果手机支持 wifi 上网，那连流量费用也可以免去了，同时大大提升了展示的速度。而且智通人才手机客户端的 android 仅为 863K，非常小巧，安装和运行的速度非常快，用户体验极佳。&lt;/p&gt;
&lt;p&gt;现如今手机已经成为了大家必不可少的生活必需品，智能人才手机应用给正在求职的朋友提供了一个贴身的平台，同时也开辟了招聘/应聘的新渠道、新模式。只要把生活中点点滴滴的，比如说等公车、排队、睡前等零碎的时间抽出来翻阅一下智能手机应用，或许就会有意想不到的发现。有了智通人才手机应用客户端，就好比多了一个贴身“猎头”为你出谋划策，寻找契机。所以，总的来说，智通人才手机应用是求职道路上如虎添翼的一款工具，极大地提高了我们求职的效率，只要在手机上轻松几步操作，就可以随时随地找到想要工作，又可以在海量信息中找到你想要的资讯。要想 hold 住工作，先从智通客户端开始。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://app.job5156.com/&quot; title=&quot;智通人才手机客户端&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://byfiles.storage.live.com/y1ps6YUc_H0qH5KfSp8vApGWdd-iWT1iFVOv30jUtbmQU3FYnBlwfew755TszbUGAvJ-ofjfUyS4Q8/zhitong.jpg&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/job/&quot; title=&quot;工作&quot; rel=&quot;tag&quot;&gt;工作&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/recommand.jpg&quot; alt=&quot;精品推荐&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/ctrip-f2e-jobs.html&quot; rel=&quot;bookmark&quot; title=&quot;携程前端开发团队招聘信息&quot;&gt;携程前端开发团队招聘信息&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年07月29日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/bike.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;杭州两三事&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/sth-about-hangzhou.html&quot; rel=&quot;bookmark&quot; title=&quot;杭州两三事&quot;&gt;杭州两三事&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年07月2日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/recommand.jpg&quot; alt=&quot;精品推荐&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/tomorrow-will-be-better.html&quot; rel=&quot;bookmark&quot; title=&quot;结束是为了更好的开始&quot;&gt;结束是为了更好的开始&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年06月18日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/bicycle.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;我也是有车一族啦&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/i-have-a-bicycle.html&quot; rel=&quot;bookmark&quot; title=&quot;我也是有车一族啦&quot;&gt;我也是有车一族啦&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年02月28日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538467/wange/feedsky/s.gif?r=http://wange.im/job5156.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/job5156.html/feed</wfw:commentRss><slash:comments>54</slash:comments><description>21世纪什么最重要？人才！就在各大企业忙着搜罗人才的同时，也是你展现自我，绽放光芒的大好机会。而我们知道，好马配好鞍，有了好鞍我们也就事半功倍了。有朋友就推荐给我这样一个“好鞍”——智通手机客户端，有了它，我们就可以无忧无虑找工作，随时随地好“薪”情。 智通手机客户端有什么用？ 或许你刚踏出学校的大门，正在为寻找一份合适的工作发愁；或许你对现在的工作状态厌倦了，想换一个工作环境；或许你正需要一个更高更好的提升空间；或许现在的工作无法让你尽情地发挥能力所长……智通手机客户端（http://app.job5156.com/）一定会对你有所帮助。 智通手机客户端集成了网站最新职位信息，并提供最贴心的求职服务与指导，为您实现随时随地找工作的便利，个性定制职位的精确推送，最新最及时的招聘会信息，还有最专业全面的求职指导。轻松求职，尽在掌握！ 经朋友推荐，我在自己的手机上安装了 android 版本的智通人才的手机应用试用了一下，感觉智通人才手机应用的功能非常全面，操作也很简单快捷，界面简洁友好，而且可以关联或者注册在智通人才招聘网的帐号，方便随时随地管理你的简历以及查看最新职位信息。 智通人才手机应用主要包括以下功能： 1、职位、公司搜索 这是智通人才手机应用的核心功能，界面简洁，但是功能俱全。我们可以通过职位、公司、地点、信息发布时间等组合条件查找匹配的招聘信息。最近的组合搜索条件会被保存在下面的历史记录中，就像一个快捷方式，以方便用户再次迅速定位到有意向的搜索条件。 2、校园招聘 校园招聘是智通人才手机应用的一大特色功能。主要针对寻求实习机会的在校学生，或者刚踏出校门的应届毕业生。这一贴心的功能切实解决，或者说缓解了应届生求职难的呼声。以同样的搜索条件，我们可以在“校园招聘”栏里找到更多接受在校学生、应届毕业生的招聘信息，相信对于渴望一份合适工作的学生朋友们这绝对是个福音。 3、招聘会信息 也有一些用户暂时没有求职意向，又或者只是处于观望态度的朋友们，或许会对资讯信息这个版块更感兴趣。在这里，你可以根据指定的场馆搜索条件订阅到所观注的职场信息以及动态，让你随时随地把握住市场的最新情况。 4、简历管理 智通手机客户端不仅仅可以搜索职位信息，还可以关联你在智通招聘网上的账户，这样就可以随时了解你的简历状态，比如说有谁看过你的简历？有谁正邀请你面试？你申请过的职位等等，以便及时在第一时间作出响应。 智通人才手机应用的优势： 1、快速、便捷 智通人才手机应用同时支持 Android、iPhone 以及 wap 三个版本，换句话说，只要你的手机能够上网，就可以轻松便捷地使用智通手机客户端。 2、全面、精确 每次筛选职位后，用户进入搜索结果页还可以通过右侧的小箭头找到二次搜索框，在这里我们可以在海量的搜索结果中通过学历、经验、姓别等筛选条件进一步精确定位到自己中意的职位或者公司，这是一个相当人性化的设置。 3、个性、贴心 关联智通的账户后，智通人才手机应用会向你个性化地推送你所关注的职位信息，还有最贴心的求职指导，最新全面的求职动态。另外还有个性化的皮肤设置，缓存管理等等。 4、友好、易用 智通手机的界面交互设计都非常友好，操作也相当顺手，无论是在查询速度、账户管理、应聘分享上都有很好的用户体验。 5、免费、小巧 下载和使用智通人才手机客户端是完全免费的，只需承担流量的费用即可，如果手机支持 wifi 上网，那连流量费用也可以免去了，同时大大提升了展示的速度。而且智通人才手机客户端的 android 仅为 863K，非常小巧，安装和运行的速度非常快，用户体验极佳。 现如今手机已经成为了大家必不可少的生活必需品，智能人才手机应用给正在求职的朋友提供了一个贴身的平台，同时也开辟了招聘/应聘的新渠道、新模式。只要把生活中点点滴滴的，比如说等公车、排队、睡前等零碎的时间抽出来翻阅一下智能手机应用，或许就会有意想不到的发现。有了智通人才手机应用客户端，就好比多了一个贴身“猎头”为你出谋划策，寻找契机。所以，总的来说，智通人才手机应用是求职道路上如虎添翼的一款工具，极大地提高了我们求职的效率，只要在手机上轻松几步操作，就可以随时随地找到想要工作，又可以在海量信息中找到你想要的资讯。要想 hold 住工作，先从智通客户端开始。 与 工作 相关的文章 携程前端开发团队招聘信息 2011年07月29日 杭州两三事 2011年07月2日 结束是为了更好的开始 2011年06月18日 我也是有车一族啦 2011年02月28日&lt;img src=&quot;http://www1.feedsky.com/t1/634538467/wange/feedsky/s.gif?r=http://wange.im/job5156.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>工作</category><category>精品推荐</category><pubDate>Thu, 15 Dec 2011 09:00:45 +0800</pubDate><author>万戈</author><comments>http://wange.im/job5156.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5200</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/job5156.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538467/6680522</fs:itemid></item><item><title>给 WordPress 添加语音搜索功能</title><link>http://wange.im/x-webkit-speech-in-wordpress.html</link><content:encoded>&lt;p&gt;相信大家都用过 Google 的搜索，不知道大家有没有注意到 Google.com in English 版本的搜索有一个语音搜索，只要吐字清晰，它的识别力还是很高的，而且也只支持中文的语音，这对于老年人、残障人士、偷懒人群是一个非常有用的装B功能。今天心血来潮，把此功能搬到 WordPress。&lt;/p&gt;
&lt;p&gt;就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。&lt;/p&gt;
&lt;p&gt;&lt;img style=&quot;float: left;&quot; src=&quot;http://byfiles.storage.live.com/y1p68_Q6wFqvO3nCwGTPzD-6fr-4jfoOPLBv7mPLsC2Lp9nRZRuuL2tMVk2dhLGunYnXr8u4pg1Ge4/speech.jpg&quot; alt=&quot;&quot; /&gt;可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 &quot;wordpress&quot; 这个关键词，有兴趣的朋友可以拿本站做测试。&lt;/p&gt;
&lt;p&gt;但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。&lt;/p&gt;
&lt;p&gt;x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下：&lt;/p&gt;
&lt;div class=&quot;source&quot; style=&quot;font-family: 'Courier New', 'Consolas', 'Lucida Console'; color: #000000;&quot;&gt;&lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;&amp;lt;input&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;type=&lt;/span&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;x-webkit-speech&lt;/span&gt; &lt;span style=&quot;color: #000080; font-weight: bold;&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;p&gt;废话很多，但是代码却很简单，赶紧试试呗~&lt;/p&gt;
&lt;div id=&quot;rl_posts&quot;&gt;    &lt;div id=&quot;rl_posts_hd&quot; class=&quot;box_hd&quot;&gt;        &lt;span id=&quot;rl_posts_title&quot; class=&quot;box_title&quot;&gt;与 &lt;h2 itemprop=&quot;keywords&quot;&gt;&lt;a href=&quot;http://wange.im/tag/api/&quot; title=&quot;API&quot; rel=&quot;tag&quot;&gt;API&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/chrome/&quot; title=&quot;Chrome&quot; rel=&quot;tag&quot;&gt;Chrome&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/html5/&quot; title=&quot;HTML5&quot; rel=&quot;tag&quot;&gt;HTML5&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/wordpress/&quot; title=&quot;WordPress&quot; rel=&quot;tag&quot;&gt;WordPress&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/search/&quot; title=&quot;搜索&quot; rel=&quot;tag&quot;&gt;搜索&lt;/a&gt;,&lt;a href=&quot;http://wange.im/tag/browser/&quot; title=&quot;浏览器&quot; rel=&quot;tag&quot;&gt;浏览器&lt;/a&gt;&lt;/h2&gt; 相关的文章        &lt;/span&gt;    &lt;/div&gt;    &lt;div id=&quot;rl_posts_bd&quot;&gt;        &lt;ul class=&quot;clearfix&quot;&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/css.png&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;CSS3 鼠标悬停图片动画效果&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/css-3-hover-animations.html&quot; rel=&quot;bookmark&quot; title=&quot;CSS3 鼠标悬停图片动画效果&quot;&gt;CSS3 鼠标悬停图片动画效果&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2009年09月6日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/wg-tags-tip.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;万戈牌 WordPress 搜索自动匹配提示标签关键词&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/wg-tags-tip.html&quot; rel=&quot;bookmark&quot; title=&quot;万戈牌 WordPress 搜索自动匹配提示标签关键词&quot;&gt;万戈牌 WordPress 搜索自动匹配提示标签关键词&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2012年04月7日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/timthumb.php?src=http://wange.im/cache/screenshot.jpg&amp;amp;h=45&amp;amp;w=45&amp;amp;zc=1&quot; alt=&quot;新年新气象，博客换新衣&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/new-year-new-theme.html&quot; rel=&quot;bookmark&quot; title=&quot;新年新气象，博客换新衣&quot;&gt;新年新气象，博客换新衣&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2012年01月20日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;&lt;li&gt;    &lt;div class=&quot;rl_thumb&quot;&gt;&lt;img src=&quot;http://wange.im/wp-content/themes/wange/imgs/category/computer.jpg&quot; alt=&quot;电脑网络&quot; width=&quot;45&quot; height=&quot;45&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;    &lt;/div&gt;    &lt;div class=&quot;rl_title&quot;&gt;        &lt;a href=&quot;http://wange.im/w3c-is-in-progress.html&quot; rel=&quot;bookmark&quot; title=&quot;W3C 规则也在与时俱进？！&quot;&gt;W3C 规则也在与时俱进？！&lt;/a&gt;        &lt;div class=&quot;rl_date&quot;&gt;2011年01月22日&lt;/div&gt;    &lt;/div&gt;&lt;/li&gt;        &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/634538468/wange/feedsky/s.gif?r=http://wange.im/x-webkit-speech-in-wordpress.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</content:encoded><wfw:commentRss>http://wange.im/x-webkit-speech-in-wordpress.html/feed</wfw:commentRss><slash:comments>89</slash:comments><description>相信大家都用过 Google 的搜索，不知道大家有没有注意到 Google.com in English 版本的搜索有一个语音搜索，只要吐字清晰，它的识别力还是很高的，而且也只支持中文的语音，这对于老年人、残障人士、偷懒人群是一个非常有用的装B功能。今天心血来潮，把此功能搬到 WordPress。 就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。 可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 &quot;wordpress&quot; 这个关键词，有兴趣的朋友可以拿本站做测试。 但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。 x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下： &amp;#60;input type=&quot;text&quot; x-webkit-speech /&amp;#62; 废话很多，但是代码却很简单，赶紧试试呗~ 与 API,Chrome,HTML5,WordPress,搜索,浏览器 相关的文章 CSS3 鼠标悬停图片动画效果 2009年09月6日 [...]&lt;img src=&quot;http://www1.feedsky.com/t1/634538468/wange/feedsky/s.gif?r=http://wange.im/x-webkit-speech-in-wordpress.html&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;</description><category>API</category><category>搜索</category><category>HTML5</category><category>浏览器</category><category>Chrome</category><category>电脑网络</category><category>WordPress</category><pubDate>Sun, 04 Dec 2011 18:35:42 +0800</pubDate><author>万戈</author><comments>http://wange.im/x-webkit-speech-in-wordpress.html#comments</comments><guid isPermaLink="false">http://wange.im/?p=5194</guid><dc:creator>万戈</dc:creator><fs:srclink>http://wange.im/x-webkit-speech-in-wordpress.html</fs:srclink><fs:srcfeed>http://wange.im/feed</fs:srcfeed><fs:itemid>feedsky/wange/~7992636/634538468/6680522</fs:itemid></item></channel></rss>
