<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Freetao&#039;s Blog &#187; JavaScript</title>
	<atom:link href="http://Kainy.CN/category/study/material/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://Kainy.CN</link>
	<description>关♥生活，关注互联网.</description>
	<lastBuildDate>Tue, 17 Apr 2012 14:03:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Chrome一键“加入收藏”按钮实现代码（gears API）</title>
		<link>http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/</link>
		<comments>http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/#comments</comments>
		<pubDate>Fri, 22 Apr 2011 12:46:33 +0000</pubDate>
		<dc:creator>Kainy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[建站❤编程]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[gears]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[收藏]]></category>

		<guid isPermaLink="false">http://Kainy.CN/?p=1987</guid>
		<description><![CDATA[在一些网站尤其是导航网站中上常常能够看到&#8221;加入收藏&#8221;、&#8221;设为首页&#8221;这样的链接，点击后就可以完成收藏本页以及更改首页操作，非常方便，也有助于提高网站的粘性。但由于各种浏览器的出现，要兼容所有浏览器越来越不容易了，目前网上翻出的代码还没见到有能够让Chrome“一键收藏”成功的。不过在前段时间开发拾贝电台应用（Chrome Webstore）的时候，发现通过调用gears API可以生成应用的桌面图标，像桌面软件的快捷方式一样方便使用，达到和加入收藏一样的效果。于是把兼容 IE6,IE7,FF 的&#8221;加入收藏&#8221;代码与之整合，实现兼容三大主流浏览器（IE、Firefox、Chrome）的“一键收藏”按钮。 实现代码： &#60;!-- 加入收藏代码 Start --&#62; function AddFavorite(sURL, sTitle) {     try { //IE         window.external.addFavorite(sURL, sTitle);     } catch (e) {         try { //Firefox             window.sidebar.addPanel(sTitle, sURL, "");         } catch (e) {    try{//Chrome无法自动收藏，用创建快应用程序的捷方式来替代。     createShortcut();    } catch(e){     alert("您的浏览器不支持自动加入收藏，请使用浏览器菜单手动设置.");       }         }     } } &#60;!-- 加入收藏代码 End --&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>在一些网站尤其是导航网站中上常常能够看到&#8221;加入收藏&#8221;、&#8221;设为首页&#8221;这样的链接，点击后就可以完成收藏本页以及更改首页操作，非常方便，也有助于提高网站的粘性。但由于各种浏览器的出现，要兼容所有浏览器越来越不容易了，目前网上翻出的代码还没见到有能够让Chrome“一键收藏”成功的。不过在前段时间开发<a title="sbboy_radio_in_chrome_webstore" href="https://chrome.google.com/webstore/search?q=%E6%8B%BE%E8%B4%9D%E7%94%B5%E5%8F%B0" target="_blank">拾贝电台应用</a>（Chrome Webstore）的时候，发现通过调用gears API可以生成应用的桌面图标，像桌面软件的快捷方式一样方便使用，达到和加入收藏一样的效果。于是把兼容 IE6,IE7,FF 的&#8221;加入收藏&#8221;代码与之整合，实现兼容三大主流浏览器（IE、Firefox、Chrome）的“一键收藏”按钮。</p>
<h2>实现代码：</h2>
<pre>&lt;!-- 加入收藏代码 Start --&gt;
function AddFavorite(sURL, sTitle) {</pre>
<p><span id="more-1987"></span></p>
<pre>    try { //IE
        window.external.addFavorite(sURL, sTitle);
    } catch (e) {
        try { //Firefox
            window.sidebar.addPanel(sTitle, sURL, "");
        } catch (e) {
   try{//Chrome无法自动收藏，用创建快应用程序的捷方式来替代。
    createShortcut();
   } catch(e){
    alert("您的浏览器不支持自动加入收藏，请使用浏览器菜单手动设置.");   
   }

        }
    }
}
&lt;!-- 加入收藏代码 End --&gt;</pre>
<pre>&lt;!-- 创建图标代码 Start --&gt;
function createShortcut() {
  var desktop = google.gears.factory.create("beta.desktop");
  var description = "将网络电台放到桌面，方便日后访问该应用，享尽听广播乐趣！.";
  var name = "Online Radio";

  var icons = {
    "16x16": "images/icon16.png",
    "32x32": "images/icon32.png",
    "48x48": "images/icon48.png",
    "128x128": "images/icon128.png"
  };

  desktop.createShortcut(name,  // 应用名称，貌似不支持中文
                         "hello_world_shortcuts.html",  // url需考虑跨域问题
                         icons,  // icons (至少一个尺寸)
                         description);  // 应用描述 (可选)
}
&lt;!-- 创建图标代码 End --&gt;</pre>
<p>//<strong>买一送一，较为友好（在Chrome下同样有提示）的“设为首页”代码.</strong></p>
<pre>&lt;!-- 设为首页代码 Start --&gt;
function setHomepage(pageURL) {
    if (document.all) {
        document.body.style.behavior='url(#default#homepage)';
        document.body.setHomePage(pageURL);
    }
    else {
            try { //IE
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            } catch (e) {
    try{ //Firefox
     var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
     prefs.setCharPref('browser.startup.homepage',pageURL);
    } catch(e) {
                alert( "您的浏览器不支持该操作，请使用浏览器菜单手动设置." );
    }
            }
    }
}
&lt;!-- 设为首页代码 End --&gt;</pre>
<p>下面是调用方法：</p>
<p>&lt;a title=&#8221;<a title="拾贝电台" href="http://radio.sbboy.com/" target="_blank">http://Radio.SBboy.com/</a>&#8221; href=&#8221;#&#8221; onclick=&#8221;javascript:setHomepage(this.title);return false;&#8221;&gt;设为主页&lt;/a&gt;<br />
&lt;a title=&#8221;<a title="拾贝电台" href="http://radio.sbboy.com/" target="_blank">http://Radio.SBboy.com/</a>&#8221; href=&#8221;#&#8221; onclick=&#8221;javascript:AddFavorite(this.title, document.title);return false;&#8221;&gt;一键收藏&lt;/a&gt;</p>
<h2>使用情况：</h2>
<p>目前测试的有Chrome 11、Firefox4、IE8 结果如下：</p>
<table>
<tbody>
<tr>
<th></th>
<th>IE</th>
<th>Firefox</th>
<th>Chrome</th>
</tr>
<tr>
<td>设为首页</td>
<td>正常</td>
<td>提示手动</td>
<td>创建图标</td>
</tr>
<tr>
<td>加入收藏</td>
<td>正常</td>
<td>正常</td>
<td>提示手动</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>演示页面：</h2>
<p>参看拾贝电台：<a title="拾贝电台" href="http://radio.sbboy.com/" target="_blank">http://radio.sbboy.com/</a></p>
<p>电台使用说明：<a title="拾贝电台帮助页面" href="http://sbboy.com/radiointro" target="_blank">http://sbboy.com/radiointro</a></p>
<p>也欢迎试用我的第一个Chrome应用：</p>
<p style="text-align: center;">——拾贝电台 <a title="拾贝电台 Chrome 应用" href="https://chrome.google.com/webstore/detail/bhcbhdhdggalgngebimnmphddjnjffdo" target="_blank">https://chrome.google.com/webstore/detail/bhcbhdhdggalgngebimnmphddjnjffdo</a> .</p>
<hr /><h4>读者评论：</h4><ol><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月23日</a>, <strong>京沪高铁</strong>：太高深了吧。</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月24日</a>, <strong>3721</strong>：看了这么多，还是觉得这个写的好</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月24日</a>, <strong>双陈记</strong>：这个不错，好好研究一下</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月25日</a>, <strong>自贡SEO</strong>：谷歌插件很强大</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月25日</a>, <strong>丽江七号网</strong>：正在学习哦</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月26日</a>, <strong>燕窝</strong>：好好学习天天向上。Js代码 一个障碍！</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月27日</a>, <strong>陶宝网</strong>：来晚了  给LZ顶一个</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月28日</a>, <strong>Firm</strong>：这些按钮我要等博客流量起来了再添加。</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年04月29日</a>, <strong>星巴雅</strong>：好好学习一下啊</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月2日</a>, <strong>肠胃不好怎么调理</strong>：来看看，蛮好，以后会常来，谢谢分享了哦，支持</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月2日</a>, <strong>168货源网</strong>：vb的啊
不错
就是不知道安全性强的浏览器会不会拦截</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月3日</a>, <strong>滕州装修</strong>：过来转转..留下脚步..老大经常更新下把...</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月3日</a>, <strong>网上赚钱吧</strong>：我来过了，看看。博主你的博文不错啊，我会继续支持你的</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月3日</a>, <strong>Kainy</strong>：vb。。。
你nb，还是我没写清楚？果断检查。</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月4日</a>, <strong>金顺道物流</strong>：来坐坐啦、、、</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月4日</a>, <strong>青岛红酒</strong>：关注一下啦</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月4日</a>, <strong>高空作业平台</strong>：拜读，长知识了，bz辛苦。</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月12日</a>, <strong>Louis Carabini</strong>：But were not utilizing Advanced Profile Kit the error appears in Google Chrome IE and Firefox so it doesnt appear to just be a firefox issue..We methodically disabled modules and tested panels to isolate the issue and came down to Image Assist any feedback on this?</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月16日</a>, <strong>陨落de芳菲</strong>：嗯，Firefox和Chrome的兼容确实比较麻烦
先做个标记  回头有空测试学习
感谢博主分享</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月16日</a>, <strong>Kainy</strong>：嗯嗯，演示地址是 radio.sbboy.com 。
忍不住再赞一下你的博客主题。</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年05月21日</a>, <strong>Michael Carabini</strong>：.In the source code above I have included a javascript that will help you detect errors..If you are trying it out on an iPhone or iPad in Safari go to settings safari developer and turn on your debugger.Reload the WebApp and look for errors that will popup in the debugger.If you arent on a mobile and just want to try it out on a standard browser IE doesnt support it yet in Firebug on Firefox you can use your console to find out what the caching is doing by using your inspect element..In Chrome you can right-click and use inspect element to do the same thing just look in your error console..If you are not on a mobile the browser should be asking you to allow caching this is a good indicator that at least it is trying to cache..Make sure you spell the tags in the manifest file and the files it is trying to cache correctly or it will not work..That is about all I can tell you feel free to use my source files and create your own WebApps.If you make any money be sure to kick some back!!!</li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/">2011年06月3日</a>, <strong>dwzone</strong>：等会试一下！</li></ol><h4>相关文章：</h4><ol><li><a href="http://Kainy.CN/2010/02/chrome-version-of-the-plug-qzone/" rel="bookmark" title="Permanent Link: chrome版的Qzone插件发布">chrome版的Qzone插件发布</a></li><li><a href="http://Kainy.CN/2010/03/%e4%b8%8b%e8%bd%bd%e6%9c%80%e6%96%b0%e7%89%88%e6%9c%acchromechromium%e7%a6%bb%e7%ba%bf%e5%ae%89%e8%a3%85%e5%8c%85%e7%9a%84%e6%96%b9%e6%b3%95/" rel="bookmark" title="Permanent Link: 下载最新版本Chrome|Chromium离线安装包的方法">下载最新版本Chrome|Chromium离线安装包的方法</a></li><li><a href="http://Kainy.CN/2010/08/make-chrome-extend/" rel="bookmark" title="Permanent Link: 手把手教你制作Chrome扩展程序包">手把手教你制作Chrome扩展程序包</a></li><li><a href="http://Kainy.CN/2010/10/chrome%e5%85%85%e5%bd%93%e6%89%8b%e6%9c%ba%e6%a8%a1%e6%8b%9f%e5%99%a8/" rel="bookmark" title="Permanent Link: Chrome充当手机模拟器">Chrome充当手机模拟器</a></li><li><a href="http://Kainy.CN/2010/10/email2gravatar/" rel="bookmark" title="Permanent Link: 输入Email查看Gravatar头像的小工具">输入Email查看Gravatar头像的小工具</a></li></ol><span>分享本文到：<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/"><img src="http://a.kainy.cn/201011/xianguo.png" title="分享到鲜果订阅" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/"><img src="http://a.kainy.cn/201011/sina.png" alt="分享到新浪微博" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" title="分享到人人网"><img src="http://a.kainy.cn/201011/renren.png"/></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" title="分享到豆瓣网"><img src="http://a.kainy.cn/201011/douban.png" alt="分享到豆瓣网" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" title="分享到FaceBook"><img src="http://a.kainy.cn/201011/facebook.png" alt="分享到FaceBook" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" title="分享到Twitter"><img src="http://a.kainy.cn/201011/twitter.png" alt="分享到Twitter" /></a>
</span> 
<br />
<h4>版权申明：</h4>
转载请注明作者、出处及原文链接:
<small><blockquote>转自：<br /><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" title="请以超链接形式注明出处，谢谢！">http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/</a>
<br />&copy; 2010 作者及版权归属: <a href="http://www.kainy.cn/index.php/about/about-kainy/">Kainy</a> @ <a href="http://kainy.cn/">Freetao's BLOG</a> &reg; 联络作者:<a href="mailto:gt@kainy.cn?subject=Freetao-Blog-Feed">GT@Kainy.CN</a>.</blockquote> </small><h4>写于去年今日:</h4><ol><li>2010:&nbsp;&nbsp;<a href='http://Kainy.CN/2010/04/%e6%9d%9c%e6%8b%89%e6%8b%89%e5%8d%87%e8%81%8c%e8%ae%b0/' title='Permanent Link to 杜拉拉升职记-什么才是你生命中的“最重要”'>杜拉拉升职记-什么才是你生命中的“最重要”(6)</a></li></ol>]]></content:encoded>
			<wfw:commentRss>http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>比较拉风的特效尝试</title>
		<link>http://Kainy.CN/2010/11/kaistique/</link>
		<comments>http://Kainy.CN/2010/11/kaistique/#comments</comments>
		<pubDate>Fri, 26 Nov 2010 17:11:12 +0000</pubDate>
		<dc:creator>Kainy</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[特效]]></category>

		<guid isPermaLink="false">http://Kainy.CN/?p=1754</guid>
		<description><![CDATA[正如你所看到的，小博的主题有了些变化，写篇文章记录之。 这个修改灵感来自于Android自2.1版本开始引入的动态壁纸效果，前景仍然是静态的图标、时钟、播放器微件之类，但背景一动起来，立体效果就多少有了一些。 兼容性：ie就没办法啦，就用原本主题的样式；Opera, FireFox, Chrome, Safari几个浏览器都支持canvas，Chrome下浏览体验最佳，在偶的机子上用Firefox打开博客略卡。 好处，增加网页的动态效果，打破传统网页背景不变前景变的惯势，当然，这还要归功于HTML5这类新技术的支持，动态背景的思路会否引发一场新的设计潮流，天知道；另一方面由于去掉了背景图片，修改后页面加载速度明显加快。 缺陷，新访客开始可能不能适应，注意力容易从内容分散到背景的变化。好在鼠标在内容部分时，背景色较鼠标移到外围区域时来得缓和，貌似鲜艳的颜色容易使人不淡定 不利于阅读，对于拉动滚动条浏览的访客……就让他兴奋点吧；同时，canvas的实现会占用较多的cpu资源（又或者是这里的使用方法欠妥），尤其是 mouse over function ，鼠标在页面中移动时低配置的机器鼠标滞感比较明显，操作体验下降。 虽是用到html5这么个比较新鲜的东东，但实现的原理也不复杂：建立canvas元素，然后通过 JavaScript 完成简单的动画。主要实现原理都可以在这个演示的代码中了解，前半部分JavaScript是在canvas元素中创建渐变，后半部分在鼠标移动时触发，产生跟随鼠标的白色亮点区域。有兴趣的童鞋也可以试试哈，以下是一些你可能用得到的素材，大都是canvas实现的特效： 模拟水面.html 眩晕光束.html 漩涡.html 绚丽流光.html 更多演示可以到这篇文章查看。 说了这么多都是博主自己的观点，究竟这个尝试的效果如何，当然还要由访客们说了算。欢迎大家发表自己的看法，有什么什么不足或者更好的实现方法都可以共同探讨哈。 P.S(20101205): 做了点改进，现在默认情况下背景是黑白渐变，按“Esc”键后可以调整背景效果，再按一次固定啦，这样就避免了消耗资源过大的问题（WebKit核心浏览器下有效）。另外修正了IE8下的问题，感谢默默童鞋的提醒。 读者评论：2010年11月27日, 万戈：html5吗？超帅哟2010年11月27日, 麦包包：好文好文 不顶不行了2010年11月27日, GuoTao：呵呵，谢谢，希望能为你的新主题开发带来灵感。2010年11月27日, 陈维国博客：CPU要高一点了啊2010年11月27日, GuoTao：呵呵，正是纠结这个问题，所以现在才做尝试。2010年11月27日, 波多野结衣：这个特效果然很不错！2010年11月27日, iHenry：我在任何情况下都会优先考虑IE，为用户着想。不支持IE的方式都是浮云。2010年11月27日, GuoTao：关于IE用户的问题我是这样考虑的： 首先调用加入特效的CSS文件，header中加入判断语句，如果是IE用户则用原主题的样式表规则覆盖； 这样IE用户看到的仍是修改之前的主题（并非主题“不支持IE”），支持canvas的浏览器才看得出变化。 选择IE早期版本的访客估计不会对新特效感兴趣，而有可能喜欢该特效的童鞋估计大都使用新浏览器。 这正是用户与网页双向选择的结果，而我们要做的正是投用户所好。2010年11月27日, 苏扬：HTML5这么牛逼？这效果好酷啊 喜欢 真的很喜欢！2010年11月28日, GuoTao：这还只是HTML5新特性的一小部分呢， 勤于折腾，你还能整出更好的效果，嘿嘿。2010年11月28日, 不在回头：电脑上的时候一定要体验下这个效果！2010年11月28日, GuoTao：呵呵，随时欢迎。2010年11月29日, 昆山小区：这效果的确很好，我也很喜欢！2010年11月29日, copper fittings：确实蛮屌的2010年11月29日, 爱琴海：跟风族，还不错。2010年11月29日, 卡,卡：！ 是不是2010年11月29日, GuoTao：谢谢。2010年11月30日, Alan：个人觉得，这体验相当不好2010年11月30日, GuoTao：首先感谢你提出的意见，我相信有不少人赞同你的观点，只是没在这儿提出； 既然是一个比较大胆的尝试，就肯定不可能只有好的一面，并且让每个人在第一次体验后全盘接受（虽然我希望）。 [...]]]></description>
			<content:encoded><![CDATA[<p>正如你所看到的，小博的主题有了些变化，写篇文章记录之。</p>
<p>这个修改<strong>灵感</strong>来自于Android自2.1版本开始引入的<a href="http://v.youku.com/v_show/id_XMTUwMDI3Mjg4.html" target="_blank">动态壁纸效果</a>，前景仍然是静态的图标、时钟、播放器微件之类，但背景一动起来，立体效果就多少有了一些。</p>
<p><strong>兼容性：</strong>ie就没办法啦，就用原本主题的样式；Opera, FireFox, Chrome, Safari几个浏览器都支持canvas，Chrome下浏览体验最佳，在偶的机子上用Firefox打开博客略卡。</p>
<p><strong>好处</strong>，增加网页的动态效果，打破传统网页背景不变前景变的惯势，当然，这还要归功于HTML5这类新技术的支持，动态背景的思路会否引发一场新的设计潮流，天知道；另一方面由于去掉了背景图片，修改后页面加载速度明显加快。</p>
<p><strong>缺陷</strong>，新访客开始可能不能适应，注意力容易从内容分散到背景的变化。好在鼠标在内容部分时，背景色较鼠标移到外围区域时来得缓和，貌似鲜艳的颜色容易使人不淡定 不利于阅读，<span id="more-1754"></span>对于拉动滚动条浏览的访客……就让他兴奋点吧；同时，canvas的实现会占用较多的cpu资源（又或者是这里的使用方法欠妥），尤其是 mouse over function ，鼠标在页面中移动时低配置的机器鼠标滞感比较明显，操作体验下降。</p>
<p style="text-align: center;"><a href="http://a.kainy.cn/201011/new-theme%EF%BC%9AColorful-BG-20101126.jpg"><img class="shadow aligncenter" src="http://a.kainy.cn/201011/new-theme%EF%BC%9AColorful-BG-20101126.jpg" alt="canvas colorful-background" width="400" height="300" /></a></p>
<p>虽是用到html5这么个比较新鲜的东东，但实现的<strong>原理</strong>也不复杂：建立canvas元素，然后通过 JavaScript 完成简单的动画。主要实现原理都可以在<a href="http://kainy.googlecode.com/svn/trunk/colorfulBG_html5_canvas/index.html" target="_blank">这个演示</a>的代码中了解，前半部分JavaScript是在canvas元素中创建渐变，后半部分在鼠标移动时触发，产生跟随鼠标的白色亮点区域。有兴趣的童鞋也可以试试哈，以下是一些你可能用得到的素材，大都是canvas实现的特效：</p>
<ul>
<li><a href="http://kainy.googlecode.com/svn/trunk/%E8%B6%85%E7%82%ABJS/%e6%a8%a1%e6%8b%9f%e6%b0%b4%e9%9d%a2.html" target="_blank">模拟水面.html</a></li>
<li><a href="http://kainy.googlecode.com/svn/trunk/%E8%B6%85%E7%82%ABJS/%E7%9C%A9%E6%99%95%E5%85%89%E6%9D%9F.html" target="_blank">眩晕光束.html</a></li>
<li><a href="http://kainy.googlecode.com/svn/trunk/超炫JS/旋风.html" target="_blank">漩涡.html</a></li>
<li><a href="http://kainy.googlecode.com/svn/trunk/%E8%B6%85%E7%82%ABJS/%E7%BB%9A%E4%B8%BD%E6%B5%81%E5%85%89.html" target="_blank">绚丽流光.html</a></li>
</ul>
<p>更多演示可以到<a href="http://kainy.cn/2010/09/%E6%9D%A5%E8%87%AAjs1k%E7%9A%84%E8%B6%85%E7%82%AB%E7%89%B9%E6%95%88%E6%BC%94%E7%A4%BA/" target="_blank">这篇</a>文章查看。</p>
<p>说了这么多都是博主自己的观点，究竟这个尝试的效果如何，当然还要由访客们说了算。欢迎大家发表自己的看法，有什么什么不足或者更好的实现方法都可以共同探讨哈。</p>
<p>P.S(20101205):</p>
<p>做了点改进，现在默认情况下背景是黑白渐变，按“Esc”键后可以调整背景效果，再按一次固定啦，这样就避免了消耗资源过大的问题（WebKit核心浏览器下有效）。另外修正了IE8下的问题，感谢默默童鞋的提醒。</p>
<hr /><h4>读者评论：</h4><ol><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>万戈</strong>：html5吗？超帅哟</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>麦包包</strong>：好文好文  不顶不行了</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>GuoTao</strong>：呵呵，谢谢，希望能为你的新主题开发带来灵感。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>陈维国博客</strong>：CPU要高一点了啊</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>GuoTao</strong>：呵呵，正是纠结这个问题，所以现在才做尝试。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>波多野结衣</strong>：这个特效果然很不错！</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>iHenry</strong>：我在任何情况下都会优先考虑IE，为用户着想。不支持IE的方式都是浮云。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>GuoTao</strong>：关于IE用户的问题我是这样考虑的：
首先调用加入特效的CSS文件，header中加入判断语句，如果是IE用户则用原主题的样式表规则覆盖；
这样IE用户看到的仍是修改之前的主题（并非主题“不支持IE”），支持canvas的浏览器才看得出变化。
选择IE早期版本的访客估计不会对新特效感兴趣，而有可能喜欢该特效的童鞋估计大都使用新浏览器。
这正是用户与网页双向选择的结果，而我们要做的正是投用户所好。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月27日</a>, <strong>苏扬</strong>：HTML5这么牛逼？这效果好酷啊 喜欢 真的很喜欢！</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月28日</a>, <strong>GuoTao</strong>：这还只是HTML5新特性的一小部分呢，
勤于折腾，你还能整出更好的效果，嘿嘿。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月28日</a>, <strong>不在回头</strong>：电脑上的时候一定要体验下这个效果！</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月28日</a>, <strong>GuoTao</strong>：呵呵，随时欢迎。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月29日</a>, <strong>昆山小区</strong>：这效果的确很好，我也很喜欢！</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月29日</a>, <strong>copper fittings</strong>：确实蛮屌的</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月29日</a>, <strong>爱琴海</strong>：跟风族，还不错。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月29日</a>, <strong>卡,卡</strong>：！ 是不是</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月29日</a>, <strong>GuoTao</strong>：谢谢。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>Alan</strong>：个人觉得，这体验相当不好</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>GuoTao</strong>：首先感谢你提出的意见，我相信有不少人赞同你的观点，只是没在这儿提出；
既然是一个比较大胆的尝试，就肯定不可能只有好的一面，并且让每个人在第一次体验后全盘接受（虽然我希望）。
根据你的意见，我觉得要提升体验 首先要解决代码效率问题 以及如何让初次访问者不感到突兀，
个人技术能力有限，只能由高手来实现了，这篇文章权当抛砖引玉。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>n73手机主题下载</strong>：增加网页的动态效果，打破传统网页背景不变前景变的惯势，当然，这还要归功于HTML5这类新技术的支持，动态背景的思路会否引发一场新的设计潮流，天知道；另一方面由于去掉了背景图片，修改后页面加载速度明显加快。

这个不错啊。。。。谢谢啊。。。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>winw</strong>：不敢用，怕拖慢了博客。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>lionshuang</strong>：对阅读的体验是一种劣化，不建议长期使用。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年11月30日</a>, <strong>GuoTao</strong>：嗯嗯嗯，确实，寻找解决方案ing 。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年12月3日</a>, <strong>小羿</strong>：挺酷的，让 flash 情何以堪</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年12月18日</a>, <strong>梧桐</strong>：Firefox对新特效的的确支持不如Webkit的唉,一不注意就卡死..话说,个人不是很喜欢自动播放的东西,比如首页的圣诞flash,嘿嘿..</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年12月18日</a>, <strong>Kainy</strong>：额，这个。。。节日嘛，就图个气氛，呵呵。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年12月24日</a>, <strong>Belleve Invis</strong>：报告测试，ie9 beta和pp7 下面canvas可以正常运作，但是你的检测方式导致一张背景图一直占着位置。</li><li><a href="http://Kainy.CN/2010/11/kaistique/">2010年12月25日</a>, <strong>Kainy</strong>：多谢反馈，有时间会修正的哈，圣诞节快乐~.</li></ol><h4>相关文章：</h4><ol><li><a href="http://Kainy.CN/2010/12/html5%e6%97%a0%e7%bd%aa-css3%e6%9c%89%e7%90%86/" rel="bookmark" title="Permanent Link: 用HTML5无罪，挺CSS3有理">用HTML5无罪，挺CSS3有理</a></li></ol><span>分享本文到：<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/"><img src="http://a.kainy.cn/201011/xianguo.png" title="分享到鲜果订阅" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/"><img src="http://a.kainy.cn/201011/sina.png" alt="分享到新浪微博" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/" title="分享到人人网"><img src="http://a.kainy.cn/201011/renren.png"/></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/" title="分享到豆瓣网"><img src="http://a.kainy.cn/201011/douban.png" alt="分享到豆瓣网" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/" title="分享到FaceBook"><img src="http://a.kainy.cn/201011/facebook.png" alt="分享到FaceBook" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/kaistique/" title="分享到Twitter"><img src="http://a.kainy.cn/201011/twitter.png" alt="分享到Twitter" /></a>
</span> 
<br />
<h4>版权申明：</h4>
转载请注明作者、出处及原文链接:
<small><blockquote>转自：<br /><a href="http://Kainy.CN/2010/11/kaistique/" title="请以超链接形式注明出处，谢谢！">http://Kainy.CN/2010/11/kaistique/</a>
<br />&copy; 2010 作者及版权归属: <a href="http://www.kainy.cn/index.php/about/about-kainy/">Kainy</a> @ <a href="http://kainy.cn/">Freetao's BLOG</a> &reg; 联络作者:<a href="mailto:gt@kainy.cn?subject=Freetao-Blog-Feed">GT@Kainy.CN</a>.</blockquote> </small>]]></content:encoded>
			<wfw:commentRss>http://Kainy.CN/2010/11/kaistique/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>JavaScript 框架</title>
		<link>http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/</link>
		<comments>http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/#comments</comments>
		<pubDate>Mon, 01 Nov 2010 06:54:15 +0000</pubDate>
		<dc:creator>Kainy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[兼容]]></category>
		<category><![CDATA[框架]]></category>

		<guid isPermaLink="false">http://Kainy.CN/?p=1646</guid>
		<description><![CDATA[由于不同 Web 浏览器所支持DOM标准版本不尽相同，与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现方式。这使得早期 JavaScript 代码实现跨浏览器兼容成为一场噩梦。 就拿网站右下角常见的浮动提示框举例： 首先，必须通过判断getElementById() 方法存在与否来决定是用document.getElementById(&#8220;floater&#8221;).style还是document.floater方法进行浮动框定位； 要想把浮动内容固定在右下角，脚本需要知道可用页面的宽度和高度，这时又得考虑不同浏览器上访问这些对象的方法也存在window.innerHeight和document.body.clientHeight的差异； 针对上下或左右滚动页面时浮动内容也需要随着页面移动，又需要考虑是用window.pageXOffset方法还是document.body.scrollLeft方法。。。 而使用JavaScript 框架就清净多了，比如jQuery就有专门的Floatbox库扩展，一句$.floatbox({content: &#8220;xxxx&#8221; );就能搞定，要是心情好还可以考虑是否加入渐变效果啥的，jQuery库在众多流行的 Web 浏览器版本上进行了可靠性测试，我们可以放心地使用这些框架，产生的JavaScript代码将会在不同浏览器和平台上以类似的方式工作。 JavaScript 框架除了能轻松生成跨浏览器兼容的 JavaScript 代码外，更重要的是包含了大量的工具和函数。 大多数 JavaScript 框架都具备的实用特性包括： 选择器 DOM 遍历 DOM 操作 实用函数 使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素。js框架不仅提供获取 DOM 元素的快捷函数，还允可以以菊花链（别想歪了哦）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操作这些对象，可以改变、添加或删除内容本身；或者使用 CSS 样式类来改变元素的外观。 事件处理 框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同，跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。 Ajax 所有这些特性都非常有用，但 JavaScript 框架有一个特性对于它最近的流行非常重要 — [...]]]></description>
			<content:encoded><![CDATA[<p>由于不同 Web 浏览器所支持DOM标准版本不尽相同，与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现方式。这使得早期 JavaScript 代码实现<strong>跨浏览器兼容</strong>成为一场噩梦。</p>
<p>就拿网站右下角常见的浮动提示框举例：</p>
<ol>
<li>首先，必须通过判断<code>getElementById()</code> 方法存在与否来决定是用document.getElementById(&#8220;floater&#8221;).style还是document.floater方法进行浮动框定位；</li>
<li>要想把浮动内容固定在右下角，脚本需要知道可用页面的宽度和高度，这时又得考虑不同浏览器上访问这些对象的方法也存在window.innerHeight和document.body.clientHeight的差异；</li>
<li>针对上下或左右滚动页面时浮动内容也需要随着页面移动，又需要考虑是用window.pageXOffset方法还是document.body.scrollLeft方法。。。</li>
</ol>
<p>而使用JavaScript 框架就清净多了，比如jQuery就有专门的Floatbox库扩展，一句$.floatbox({content: &#8220;xxxx&#8221; );就能搞定，要是心情好还可以考虑是否加入渐变效果啥的，jQuery库在众多流行的 Web 浏览器版本上进行了可靠性测试，我们可以放心地使用这些框架，产生的JavaScript代码将会在不同浏览器和平台上以类似的方式工作。<span id="more-1646"></span></p>
<p>JavaScript 框架除了能轻松生成跨浏览器兼容的 JavaScript 代码外，更重要的是包含了大量的<strong>工具和函数</strong>。</p>
<p>大多数 JavaScript 框架都具备的实用特性包括：</p>
<ul>
<li>选择器</li>
<li>DOM 遍历</li>
<li>DOM 操作</li>
<li>实用函数</li>
</ul>
<p><em>使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素。js框架不仅提供获取 DOM 元素的快捷函数，还允可以以菊花链（别想歪了哦）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操作这些对象，可以改变、添加或删除内容本身；或者使用 CSS 样式类来改变元素的外观。</em></p>
<ul>
<li>事件处理</li>
</ul>
<p><em>框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同，跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。</em></p>
<ul>
<li>Ajax</li>
</ul>
<p><em>所有这些特性都非常有用，但 JavaScript 框架有一个特性对于它最近的流行非常重要 — 支持 Ajax。与 JavaScript 的其他许多方面一样，每个 Web 浏览器往往以不同方式支持 Ajax，这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持，通常提供 Ajax 请求和响应对象，以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数（helper）。</em></p>
<p><strong>个人理解</strong>，所有这些JavaScript库所作的就是</p>
<ol>
<li>定义一套自己的操作语法，比如用来查找元素的伪选择器（pseudo-selector）；</li>
<li>将一些常用操作写成实用（Utility）函数，提供接口供使用者调用；</li>
<li>在此基础上扩展一些高级功能，把原本需要大量JavaScript代码来完成的操作优化后全部打包到库中，固化为解决特定问题的工具。</li>
<li>UX 增强功能，插件扩展。</li>
</ol>
<p>一个JavaScript框架就如一个工具箱，不同的JavaScript框架就是不同的工具箱，工具箱不同就在于里面的工具规格和操作手册之间的差异。有了工具和操作手册，完成原本需要手工完成的操作就省力、省心得多了。但就像世上不存在万能工具，工具总是不如手指来的灵活，工具所能胜任的工作也大大受到限制，也因此产生了不同的工具箱来适应不同工作环境，这也就是为什么jQuery虽然貌似最受欢迎，也还有多种框架并存的原因。</p>
<p><strong>主流js框架特性</strong>对比：</p>
<p style="text-align: center;"><a href="http://a.kainy.cn/201010/JavaScript%20Framework%20%E5%AF%B9%E6%AF%94%E8%A1%A8.png"><img class="shadow aligncenter" title="js框架特性对比" src="http://a.kainy.cn/201010/JavaScript%20Framework%20%E5%AF%B9%E6%AF%94%E8%A1%A8.png" alt="js框架特性对比" width="400" height="614" /></a></p>
<p style="text-align: left;"><strong>非主流框架介绍/演示：</strong></p>
<h4>1. <a href="http://dojotoolkit.org/">Dojo</a> (<a href="http://dojocampus.org/explorer/">演示地址</a>)</h4>
<p>Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供ajax，events，packaging，CSS-based querying，animations，JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。</p>
<h4>2. <a href="http://greghoustondesign.com/demos/mocha/">Mocha</a> (<a href="http://mochaui.com/demo/">演示地址</a>)</h4>
<p>Mocha是一个构建在Mootools Javascript框架上的web应用程序UI库。Mocha GUI组件由canvas标记产生。</p>
<h4>3. <a href="http://openrico.org/">Rich Ajax Framework</a> (<a href="http://demos.openrico.org/">演示地址</a>)</h4>
<p>Rich是一个面向对象的JavaScript框架，用于开发RIA应用程序。它实现了Grid，Calendar，Tree，Accordion等控件。简化Ajax处理，拖放支持，提供幻灯片展示效果等。</p>
<h4>4. <a href="http://www.bbc.co.uk/glow/">Glow</a> (<a href="http://www.bbc.co.uk/glow/demos/">演示地址</a>)</h4>
<p>Glow是由BBC广播公司开发的一个开源JavaScript框架，提供的功能与jQuery、MooTools等框架相似。它除了提供一些常用的功能和解决跨浏览器的问题之外，还提供一组Web UI控件.</p>
<h4>5. <a href="http://www.uize.com/">UIZE JavaScript Framework</a> (<a href="http://www.uize.com/">演示地址</a>)</h4>
<p>UIZE JavaScript Framework是一个强大、开源、面向对象的JavaScript框架。支持widgets、AJAX、DOM、模板等。</p>
<h4>6. <a href="http://www.edojs.com/">EdoJS框架</a> (<a href="http://www.edojs.com/demo.html">演示地址</a>)</h4>
<ol>
<li><strong>丰富的组件库</strong></li>
<li><strong>简单,强大,灵活</strong>的可编程性</li>
<li>强大的<strong>可视化设计支持</strong> : IDE</li>
<li>完善的文档和细致的教程: Api doc</li>
<li><strong>小体积</strong> : javascript css一共只有100K</li>
<li><strong>专业的团队</strong>,强大细致的技术支持 : 全天候的服务, 您可以随时联系我们解决您的疑难杂症.</li>
<li><strong>高级UI</strong> : 除常规组件外,提供甘特图,日历,文档管理器和excel这样的高级组件.</li>
<li><strong>极限的性能 </strong>: edo做出来的东西,初始化速度达到理论的极限值!组件的操作性能也是极速!</li>
<li>对传统UI框架的<strong>突破</strong> : 随着界面的复杂度增加,浏览器内的DOM元素量增多,导致用户操作越来越慢,UI的响应越来越差,甚至导致做出来的界面慢的无法运行. edo天然做了这方面的优化,强大的”动态”机制,即时您需要支持1万行N(N&gt;=100)列的表格组件,在edo中也已经成为现实! <strong>性能!是edo的一大杀手锏。</strong></li>
</ol>
<h4>7. <a href="http://june-js.com/index.php">June Framework</a> (<a href="http://june-js.com/v20/examples/">演示地址</a>)</h4>
<p>基于Core核心库的一个小巧的JS框架，它的作者是 Kevin Yank 和 Cameron Adams。开发人员可以将这个框架引入自己的项目中，不必担心与其它JS库发生冲突，因为JUNE是它独特的命名空间。</p>
<p>JUNE 具有强大的支持功能：</p>
<ul>
<li>DOM 选择 (例如: JUNE.Dom.getByTags/getByClass/getByAttribute),</li>
<li>DOM 操作 (例如: JUNE.Dom.insertBefore/insertAfter/removeChild</li>
</ul>
<h4>8. <a href="http://scripty2.com/">Scripty2</a> (<a href="http://scripty2.com/demos/cards/">演示地址</a>)</h4>
<p>Scripty2 一个完全重写的Script.aculo.us 脚本库，增强了动感效果。</p>
<h4>9. <a href="http://www.ape-project.org/en/home.html">Ajax Push Engine</a> (<a href="http://www.ape-project.org/en/demos/">演示地址</a>)</h4>
<p>Ajax Push Engine为一开源的插件,允许数以千计浏览者即时交换数据,而无需在重新加载网页,也不需要安装其他的插件。</p>
<p>由以上js框架的演示可以看到使用 JavaScript 框架编程的优势以及它们是如何简化交互式应用程序的编写。用户界面（UI）组件以及用户体验（UX）增强，这些在以往需要付出巨大努力来完成的工作竟可以如此轻松地完成。JavaScript框架正在使开发人员从原本注重效果的代码实现方法中解放出来，将更多的精力投入到交互功能的实现和用户体验的提升中。可以预见，在不远的将来，JavaScript必将在应用程序从桌面转移到 Web 平台（比如云操作系统）和前端开发领域大展拳脚，而日益健全的JavaScript框架将为此锦上添花。</p>
<p>参考资料：</p>
<ol>
<li>这里的几个演示将带你体验JavaScript的精妙之处 ：<a href="http://goo.gl/qJ1P" target="_blank">http://goo.gl/qJ1P</a></li>
<li>以及让Kainy喜欢上JavaScript的一个小玩意：</li>
</ol>
<p><em>打开任一网页，在地址栏粘贴下面一段代码后就可以编辑该网页</em></p>
<blockquote><p><em></em><br />
javascript:document.body.contentEditable=&#8217;true&#8217;; document.designMode=&#8217;on&#8217;; void 0</p></blockquote>
<p>.</p>
<hr /><h4>读者评论：</h4><ol><li><a href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/">2010年11月1日</a>, <strong>信誉导购</strong>：笨笨深夜造访，问候博主。</li><li><a href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/">2010年11月2日</a>, <strong>高空作业平台</strong>：写的不错，以后常来。</li></ol><h4>相关文章：</h4><ol><li><a href="http://Kainy.CN/2010/10/javascript%e4%b8%ad%e7%9a%84bom%e5%92%8cdom/" rel="bookmark" title="Permanent Link: JavaScript中的BOM和DOM">JavaScript中的BOM和DOM</a></li><li><a href="http://Kainy.CN/2010/01/qq-online-state-v2-0-published/" rel="bookmark" title="Permanent Link: QQ在线状态 V2.0正式发布">QQ在线状态 V2.0正式发布</a></li><li><a href="http://Kainy.CN/2010/07/thinkphp-2/" rel="bookmark" title="Permanent Link: ThinKPHP学习笔记-2">ThinKPHP学习笔记-2</a></li><li><a href="http://Kainy.CN/2011/04/chrome%e4%b8%80%e9%94%ae%e5%8a%a0%e5%85%a5%e6%94%b6%e8%97%8f%e6%8c%89%e9%92%ae%e5%ae%9e%e7%8e%b0%e4%bb%a3%e7%a0%81%ef%bc%88gears-api%ef%bc%89/" rel="bookmark" title="Permanent Link: Chrome一键“加入收藏”按钮实现代码（gears API）">Chrome一键“加入收藏”按钮实现代码（gears API）</a></li><li><a href="http://Kainy.CN/2010/03/ultraedit%e5%ae%9e%e7%94%a8%e6%8a%80%e5%b7%a7%e8%bd%ac/" rel="bookmark" title="Permanent Link: UltraEdit实用技巧(转)">UltraEdit实用技巧(转)</a></li></ol><span>分享本文到：<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/"><img src="http://a.kainy.cn/201011/xianguo.png" title="分享到鲜果订阅" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/"><img src="http://a.kainy.cn/201011/sina.png" alt="分享到新浪微博" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/" title="分享到人人网"><img src="http://a.kainy.cn/201011/renren.png"/></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/" title="分享到豆瓣网"><img src="http://a.kainy.cn/201011/douban.png" alt="分享到豆瓣网" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/" title="分享到FaceBook"><img src="http://a.kainy.cn/201011/facebook.png" alt="分享到FaceBook" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/" title="分享到Twitter"><img src="http://a.kainy.cn/201011/twitter.png" alt="分享到Twitter" /></a>
</span> 
<br />
<h4>版权申明：</h4>
转载请注明作者、出处及原文链接:
<small><blockquote>转自：<br /><a href="http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/" title="请以超链接形式注明出处，谢谢！">http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/</a>
<br />&copy; 2010 作者及版权归属: <a href="http://www.kainy.cn/index.php/about/about-kainy/">Kainy</a> @ <a href="http://kainy.cn/">Freetao's BLOG</a> &reg; 联络作者:<a href="mailto:gt@kainy.cn?subject=Freetao-Blog-Feed">GT@Kainy.CN</a>.</blockquote> </small>]]></content:encoded>
			<wfw:commentRss>http://Kainy.CN/2010/11/javascript-%e6%a1%86%e6%9e%b6/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>输入Email查看Gravatar头像的小工具</title>
		<link>http://Kainy.CN/2010/10/email2gravatar/</link>
		<comments>http://Kainy.CN/2010/10/email2gravatar/#comments</comments>
		<pubDate>Wed, 27 Oct 2010 12:12:03 +0000</pubDate>
		<dc:creator>Kainy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Gravatar]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://Kainy.CN/?p=1628</guid>
		<description><![CDATA[当你到任何一个支持Gravatar的网站留言时，这个网站都就会根据你留言时提供的Email地址为你显示出匹配的头像。当然，这个头像，是需要你事先到Gravatar的网站注册并上传的，否则，在这个网站上，就只会显示成一个默认的头像（如右图）。具体介绍见这篇文章。 下面介绍下本文的主角：这是一个可以查看email所对应Gravatar头像的小工具，用浏览器打开后，输入需要查询的email，点击旁边的按钮提交后即可 大致就是这个效果啦。原理很简单，就是通过调用js文件将输入框提交的email字符串进行md5值计算，然后按格式： http://www.gravatar.com/avatar/字符串的DM5值 替换掉原来图片的src属性的值，图片就替换为属于所输入email的Gravatar头像啦。Gravatar也提供了API但多是服务端脚本，这里做的就是把这些工作提到前端来做。不过目前这小页面还是很有问题滴，最大的问题就是只能在ie6下使用啦，在Chrome下头像图片就是不出来，太不给力了，估计和调用函数的方式不恰当有关系吧。 权当练手，目前的JavaScript水平也就做到这一步啦，有机会日后再改进了，读者中若有知道如何解决此bug的js高手也烦请指点指点小弟，先谢过了。 演示地址：http://kainy.googlecode.com/svn/trunk/Email2Gravatar/index.html . P.S： [20101217]最新更新~ 已将该小工具代码托管到Github，号称代码玩家的MySpace，地址是：https://github.com/kainy/Email2Avatar/ 欢迎有兴趣者 fork ^_^ [20110514]已作为WebApp 发布到Chrome Web Store！ Google搜索关键词“Email2Gravatar” 发布页面：https://chrome.google.com/webstore/detail/kgbpphialbelagkhejpbkjoghklpoocd?hl=en-GB 。 读者评论：2010年10月28日, lingr：很收益2010年10月28日, winw：原来还能这样子2010年10月28日, GuoTao：呵呵，对啊，其实就是把原本由服务端做的事拿到前端来做罢了。2010年10月29日, iHenry：嗯，原理的确是很简单的。gravatar靠md5来匹配头像，我也是无意中才发现的。2010年10月29日, GuoTao：嘿嘿，唯一要特别注意的就是必须把Email转小写。2010年10月30日, 学夫子：基本上就是和网站的一个原理的，呵呵2010年10月30日, GuoTao：恩，做的是同一件事，只是换了一种方法来实现。 就好比吃饭，可以把食物放入口中用牙齿咀嚼后吞下，也可以直接吞下别人为你嚼好的那一坨。 获取Gravatar头像一般的做法是服务器将转好的图片url发给你的浏览器，而这里做的是在自己浏览器完成 Email→md5→图片url。2010年10月31日, 河津：试用了，很不错2010年10月31日, GuoTao：呵呵，谢谢哦。2011年03月18日, 加气混凝土设备：顶~~~~~~~~~好贴呀………………………………2011年03月27日, 小熊SEO博客：可以使用qq头像吗？2011年04月12日, web前端寒风：很实用，试用一下2011年04月12日, Kainy：呵呵，最近有个改进版本（不弹出提示即可更新头像），一直忘了更新，明天到公司给提交下。。。2011年05月15日, 梧桐：一直在想，gravatar 这个模式要是遭到恶意发送垃圾肿么办。。分享本文到： 版权申明： 转载请注明作者、出处及原文链接: 转自：http://Kainy.CN/2010/10/email2gravatar/ &#169; 2010 作者及版权归属: Kainy @ Freetao's BLOG &#174; 联络作者:GT@Kainy.CN.]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" style="border: 2px solid black;" src="http://a.kainy.cn/201010/gravatar34.jpg" alt="" width="34" height="34" />当你到任何一个支持<a href="http://gravatar.com/" target="_blank">Gravatar</a>的网站留言时，这个网站都就会根据你留言时提供的Email地址为你显示出匹配的头像。当然，这个头像，是需要你事先到Gravatar的网站注册并上传的，否则，在这个网站上，就只会显示成一个默认的头像（如右图）。具体介绍见<a href="http://www.iplaysoft.com/gravatar.html" target="_blank">这篇文章</a>。</p>
<p>下面介绍下本文的主角：这是一个可以查看email所对应Gravatar头像的小工具，<a href="http://kainy.googlecode.com/svn/trunk/Email2Gravatar/index.html" target="_blank">用浏览器打开</a>后，输入需要查询的email，点击旁边的按钮提交后即可<span id="more-1628"></span></p>
<p style="text-align: left;"><a href="http://a.kainy.cn/201010/Email2Gravatar.png"><img class="shadow aligncenter" src="http://a.kainy.cn/201010/Email2Gravatar.png" alt="" width="255" height="400" /></a></p>
<p style="text-align: left;">大致就是这个效果啦。原理很简单，就是通过调用js文件将输入框提交的email字符串进行md5值计算，然后按格式：</p>
<blockquote>
<p style="text-align: center;">http://www.gravatar.com/avatar/字符串的DM5值</p>
</blockquote>
<p style="text-align: left;">替换掉原来图片的src属性的值，图片就替换为属于所输入email的Gravatar头像啦。Gravatar也提供了<a href="http://en.gravatar.com/site/implement/" target="_blank">API</a>但多是服务端脚本，这里做的就是把这些工作提到前端来做。不过目前这小页面还是很有问题滴，最大的问题就是只能在ie6下使用啦，在Chrome下头像图片就是不出来，太不给力了，估计和调用函数的方式不恰当有关系吧。</p>
<p style="text-align: left;">权当练手，目前的JavaScript水平也就做到这一步啦，有机会日后再改进了，读者中若有知道如何解决此bug的js高手也烦请指点指点小弟，先谢过了。</p>
<p style="text-align: left;">演示地址：<a href="http://kainy.googlecode.com/svn/trunk/Email2Gravatar/index.html">http://kainy.googlecode.com/svn/trunk/Email2Gravatar/index.html</a> .</p>
<p style="text-align: left;"><strong>P.S： </strong></p>
<p style="text-align: left;">[<span style="color: #ff0000;">20101217</span>]最新更新~ 已将该小工具代码托管到Github，号称代码玩家的MySpace，地址是：<a href="https://github.com/kainy/Email2Avatar/" target="_blank">https://github.com/kainy/Email2Avatar/</a></p>
<p style="text-align: left;">欢迎有兴趣者 fork ^_^</p>
<p style="text-align: left;">[<span style="color: #ff0000;">20110514</span>]已作为WebApp 发布到Chrome Web Store！ Google搜索关键词“Email2Gravatar”</p>
<p style="text-align: left;">发布页面：<a href="https://chrome.google.com/webstore/detail/kgbpphialbelagkhejpbkjoghklpoocd?hl=en-GB" target="_blank">https://chrome.google.com/webstore/detail/kgbpphialbelagkhejpbkjoghklpoocd?hl=en-GB</a> 。</p>
<hr /><h4>读者评论：</h4><ol><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月28日</a>, <strong>lingr</strong>：很收益</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月28日</a>, <strong>winw</strong>：原来还能这样子</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月28日</a>, <strong>GuoTao</strong>：呵呵，对啊，其实就是把原本由服务端做的事拿到前端来做罢了。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月29日</a>, <strong>iHenry</strong>：嗯，原理的确是很简单的。gravatar靠md5来匹配头像，我也是无意中才发现的。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月29日</a>, <strong>GuoTao</strong>：嘿嘿，唯一要特别注意的就是必须把Email转小写。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月30日</a>, <strong>学夫子</strong>：基本上就是和网站的一个原理的，呵呵</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月30日</a>, <strong>GuoTao</strong>：恩，做的是同一件事，只是换了一种方法来实现。
就好比吃饭，可以把食物放入口中用牙齿咀嚼后吞下，也可以直接吞下别人为你嚼好的那一坨。
获取Gravatar头像一般的做法是服务器将转好的图片url发给你的浏览器，而这里做的是在自己浏览器完成 Email→md5→图片url。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月31日</a>, <strong>河津</strong>：试用了，很不错</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2010年10月31日</a>, <strong>GuoTao</strong>：呵呵，谢谢哦。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2011年03月18日</a>, <strong>加气混凝土设备</strong>：顶~~~~~~~~~好贴呀………………………………</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2011年03月27日</a>, <strong>小熊SEO博客</strong>：可以使用qq头像吗？</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2011年04月12日</a>, <strong>web前端寒风</strong>：很实用，试用一下</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2011年04月12日</a>, <strong>Kainy</strong>：呵呵，最近有个改进版本（不弹出提示即可更新头像），一直忘了更新，明天到公司给提交下。。。</li><li><a href="http://Kainy.CN/2010/10/email2gravatar/">2011年05月15日</a>, <strong>梧桐</strong>：一直在想，gravatar 这个模式要是遭到恶意发送垃圾肿么办。。</li></ol><span>分享本文到：<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/"><img src="http://a.kainy.cn/201011/xianguo.png" title="分享到鲜果订阅" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/"><img src="http://a.kainy.cn/201011/sina.png" alt="分享到新浪微博" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/" title="分享到人人网"><img src="http://a.kainy.cn/201011/renren.png"/></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/" title="分享到豆瓣网"><img src="http://a.kainy.cn/201011/douban.png" alt="分享到豆瓣网" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/" title="分享到FaceBook"><img src="http://a.kainy.cn/201011/facebook.png" alt="分享到FaceBook" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/email2gravatar/" title="分享到Twitter"><img src="http://a.kainy.cn/201011/twitter.png" alt="分享到Twitter" /></a>
</span> 
<br />
<h4>版权申明：</h4>
转载请注明作者、出处及原文链接:
<small><blockquote>转自：<br /><a href="http://Kainy.CN/2010/10/email2gravatar/" title="请以超链接形式注明出处，谢谢！">http://Kainy.CN/2010/10/email2gravatar/</a>
<br />&copy; 2010 作者及版权归属: <a href="http://www.kainy.cn/index.php/about/about-kainy/">Kainy</a> @ <a href="http://kainy.cn/">Freetao's BLOG</a> &reg; 联络作者:<a href="mailto:gt@kainy.cn?subject=Freetao-Blog-Feed">GT@Kainy.CN</a>.</blockquote> </small>]]></content:encoded>
			<wfw:commentRss>http://Kainy.CN/2010/10/email2gravatar/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>jQuery实现背景图填满屏幕的代码</title>
		<link>http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/</link>
		<comments>http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/#comments</comments>
		<pubDate>Sun, 24 Oct 2010 12:23:40 +0000</pubDate>
		<dc:creator>Kainy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[代码]]></category>

		<guid isPermaLink="false">http://Kainy.CN/?p=1586</guid>
		<description><![CDATA[拾贝电台是一个收集了众多优秀电台资源的广播频道聚合器，其功能模块较少，无非播放控制和播放列表等几个窗口。为了不至于留下太多的空白区域影响整体美观，设置了可拉伸的背景图片。这里把实现该效果的代码贴出: 用jQuery实现背景拉伸，自适应窗口的调整而改变大小。该段代码应该放在网页内容之前，最好是紧跟在&#60;body&#62;之后，这样可以避免页面加载时出现太突兀的情景。 JavaScript计算客户端浏览器窗口尺寸比较简单。第一个模块的代码做一些初步的计算，判断图像比例，浏览器宽度。 再使用jQuery来操作相应节点的CSS规则改变图片显示，以保持图像的的比例不变 适应浏览器窗口的调整。 JavaScript代码： $(document).ready(function() { var bgImage = $(&#8216;#background-image&#8217;); function resizeImg() { var imgwidth = bgImage.width(), imgheight = bgImage.height(), winwidth = $(window).width(), winheight = $(window).height(), widthratio = winwidth / imgwidth, heightratio = winheight / imgheight, widthdiff = heightratio * imgwidth, heightdiff = widthratio * imgheight; if(heightdiff&#62;winheight) { bgImage.css({ width: winwidth+&#8217;px&#8217;, height: heightdiff+&#8217;px&#8217; }); [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://radio.sbboy.com/" target="_blank">拾贝电台</a>是一个收集了众多优秀电台资源的广播频道聚合器，其功能模块较少，无非播放控制和播放列表等几个窗口。为了不至于留下太多的空白区域影响整体美观，设置了可拉伸的背景图片。这里把实现该效果的代码贴出:</p>
<p>用jQuery实现背景拉伸，自适应窗口的调整而改变大小。该段代码应该放在网页内容之前，最好是紧跟在&lt;body&gt;之后，这样可以避免页面加载时出现太突兀的情景。</p>
<p>JavaScript计算客户端浏览器窗口尺寸比较简单。第一个模块的代码做一些初步的计算，判断图像比例，浏览器宽度。</p>
<p>再使用jQuery来操作相应节点的CSS规则改变图片显示，以保持图像的的比例不变 适应浏览器窗口的调整。<span id="more-1586"></span></p>
<p><strong>JavaScript代码：</strong></p>
<blockquote><p>$(document).ready(function() {</p>
<p>var bgImage = $(&#8216;#background-image&#8217;);</p>
<p>function resizeImg() {<br />
var imgwidth = bgImage.width(),<br />
imgheight = bgImage.height(),<br />
winwidth = $(window).width(),<br />
winheight = $(window).height(),<br />
widthratio = winwidth / imgwidth,<br />
heightratio = winheight / imgheight,<br />
widthdiff = heightratio * imgwidth,<br />
heightdiff = widthratio * imgheight;</p>
<p>if(heightdiff&gt;winheight) {<br />
bgImage.css({<br />
width: winwidth+&#8217;px&#8217;,<br />
height: heightdiff+&#8217;px&#8217;<br />
});<br />
} else {<br />
bgImage.css({<br />
width: widthdiff+&#8217;px&#8217;,<br />
height: winheight+&#8217;px&#8217;<br />
});<br />
}</p>
<p>$(&#8220;#background-image&#8221;).show();</p>
<p>}<br />
resizeImg();<br />
$(window).resize(function() {<br />
resizeImg();<br />
});</p>
<p>});</p></blockquote>
<p><strong>CSS代码：</strong></p>
<blockquote><p>#background-image{<br />
position:absolute;   //配合z-index使背景图片显示在网页内容下方<br />
top:0;<br />
left:0;<br />
z-index:-10;<br />
overflow: hidden;<br />
width: 100%;<br />
display:none;    //未开启JavaScript的浏览器将不会显示背景图片<br />
}</p></blockquote>
<p><strong>演示：</strong></p>
<p><a href="http://radio.sbboy.com/" target="_blank">http://radio.sbboy.com/</a> 打开后可以取消最大化，拖动修改窗口尺寸 则页面的背景图片也会随之变化。</p>
<hr /><h4>读者评论：</h4><ol><li><a href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/">2010年10月29日</a>, <strong>商务网</strong>：沙发，围观！</li><li><a href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/">2010年11月1日</a>, <strong>audacity dowNload</strong>：hello</li><li><a href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/">2010年12月14日</a>, <strong>Baby Clothes</strong>：Pretty good article. I just stumbled upon your site and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.</li></ol><h4>相关文章：</h4><ol><li><a href="http://Kainy.CN/2010/09/22-best-and-latest-jquery-demo/" rel="bookmark" title="Permanent Link: 最新20佳jQuery演示">最新20佳jQuery演示</a></li><li><a href="http://Kainy.CN/2010/10/build-my-jquery-plugin/" rel="bookmark" title="Permanent Link: jQuery插件的创建方法">jQuery插件的创建方法</a></li><li><a href="http://Kainy.CN/about/kainy/" rel="bookmark" title="Permanent Link: 关于Kainy">关于Kainy</a></li><li><a href="http://Kainy.CN/2010/02/47-cool-css3-animation-demos/" rel="bookmark" title="Permanent Link: CSS3的47个超酷应用实例">CSS3的47个超酷应用实例</a></li><li><a href="http://Kainy.CN/2009/12/wordpress-2-qzone/" rel="bookmark" title="Permanent Link: 同步 WordPress 博客日志到 Qzone的方法">同步 WordPress 博客日志到 Qzone的方法</a></li></ol><span>分享本文到：<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/"><img src="http://a.kainy.cn/201011/xianguo.png" title="分享到鲜果订阅" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/"><img src="http://a.kainy.cn/201011/sina.png" alt="分享到新浪微博" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/" title="分享到人人网"><img src="http://a.kainy.cn/201011/renren.png"/></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/" title="分享到豆瓣网"><img src="http://a.kainy.cn/201011/douban.png" alt="分享到豆瓣网" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/" title="分享到FaceBook"><img src="http://a.kainy.cn/201011/facebook.png" alt="分享到FaceBook" /></a>
<a rel="nofollow" target="_blank" href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/" title="分享到Twitter"><img src="http://a.kainy.cn/201011/twitter.png" alt="分享到Twitter" /></a>
</span> 
<br />
<h4>版权申明：</h4>
转载请注明作者、出处及原文链接:
<small><blockquote>转自：<br /><a href="http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/" title="请以超链接形式注明出处，谢谢！">http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/</a>
<br />&copy; 2010 作者及版权归属: <a href="http://www.kainy.cn/index.php/about/about-kainy/">Kainy</a> @ <a href="http://kainy.cn/">Freetao's BLOG</a> &reg; 联络作者:<a href="mailto:gt@kainy.cn?subject=Freetao-Blog-Feed">GT@Kainy.CN</a>.</blockquote> </small>]]></content:encoded>
			<wfw:commentRss>http://Kainy.CN/2010/10/jquery%e5%ae%9e%e7%8e%b0%e8%83%8c%e6%99%af%e5%a1%ab%e6%bb%a1%e5%b1%8f%e5%b9%95/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

