博客园_eoiioe

关于android开发在布局中使用sharp时遇到的问题

2012-03-28T13:26:00Z

最近学习使用android中的sharp元素，其中的corners属性令我甚是费解，在此记录下问题解决心得，以便查阅！

从网上找到一篇讲解sharp的文章，自认为写的非常详细 http://kofi1122.blog.51cto.com/2815761/521605，观察其中sharp的corners节点的使用方法如下代码引用，照着尝试去做，结果令我很是困惑。

在android2.1的环境中使用如上代码，完全没有圆角，只有加上android:radius="5dp"才会出现圆角（不知道是不是android2.1的问题）。

其中 android:topLeftRadius="0dp" 和 android:bottomRightRadius="0dp"

是罪魁祸首，不知道笔者为什么会写成0还贴出了效果图，查了很多资料才知道，这个值不能设0 ，设为1dp后，所有圆角效果就出现了。

郁闷的就是为什么设0不起作用呢，如果想做部分直角，部分圆角效果根本无法完成，有个办法是将1dp设成1px就可以以假乱真了，不要设1dp（设1dp圆角还是很明显的），不知道这算不算android系统的bug...

本文链接

如何快速启动chrome插件

2011-09-03T05:18:00Z

最近开发了一段时间的chrome app，今将一些体会感想分享给大家（不是App开发基础教程）。

chrome开放了丰富的API，涵盖了浏览器的方方面面，其应用可以说“只有想不到，没有做不到”。然而，酒香也怕巷子深，单纯依赖chrome工具栏上的简单入口（Browser Actions, Page Actions）难以引起用户注意，如何让一个功能强大的扩展被用户很方便的使用起来，困扰了我很长时间。

经过一段时间的探索，总结了几种app入口方式，下面以webElements (网页元素查看器，提取页面图片、正文，尤其适合论坛看图，轻松阅读文章) 为例，一一介绍。

入口一：工具栏 Browser Actions 和 Page Actions

这种方式是chrome应用开发文档中默认提供的入口，不过多介绍。

优点：简单容易上手，不需要额外开发。

缺点：通常展现在工具栏右上角，并且需要鼠标点击触发，无形中加大了用户的使用成本。并且很多应用图标摆放在一起，没有亮点，难以调动用户频繁使用

难易程度：容易

入口二：快捷键

这个也比较容易理解，利用应用向页面注入JS脚本，监控页面按键（不记录任何按键信息），捕获到快捷键时直接启动应用。需要有选项页设置是否启用快捷键，以及快捷键设置等内容。

优点：方便键盘操作，一键启动应用，不需要鼠标长距离移动点击，摆脱对鼠标的依赖

缺点：快捷键定义容易与其他软件冲突；该方式比较隐蔽，不容易让用户知道；需要额外开发。

难以程度：适中

入口三：鼠标手势

国内浏览器培养出了一大批鼠标手势的忠实粉丝，基于这个现状，就有了利用鼠标手势启动扩展应用的思路。chrome本身不带鼠标手势功能，应用商店也涌现出了一大批鼠标手势的扩展应用。拜于chrome扩展间可以相互通信的机制，使用鼠标手势启动扩展便有了理论条件支持。现webElements已实现通过Chrome Mouse Gesture 这款鼠标手势扩展直接调用，我个人最喜欢这种方式。

优点：鼠标手势粉丝众多，无需长距离移动鼠标，增加趣味性

缺点：需要另外安装鼠标手势扩展或将鼠标手势整合到应用中

难易程度：难

入口四：页面小助手

所谓“小助手”是指在页面上展现一些内容，提醒一些信息，来引起用户注意。此方式较前三种入口，可谓最直接的方式。

该方式要点：

1、不易过分干扰用户浏览行为；

2、抓住用户最感兴趣的内容提醒；

3、突出品牌。

优点：使用户快速感知所关心的内容（快捷键和鼠标手势都无法做到）；使应用品牌直面用户，加深品牌印象

缺点：开发中需要注意页面兼容性

难易程度：适中

个人观点，难免疏漏，欢迎拍砖！赐教！

-------------------------------------------------- 无敌分隔线 ------------------------------------------------------

贴几张 webElements 截图，欢迎围观

提取页面图片分类查看

启用幻灯片模式浏览图片

抽取正文

本文链接

深入解析IE兼容模式

2011-08-01T01:44:00Z

英文原文：http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，
此文章说明文件兼容性的必要性，列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。

了解文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

认识文件兼容性模式

IE8支持几种文件兼容性模式，它们具有不同的特性并影响内容显示的方式。

•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有<!DOCTYPE>指令。
•IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE，使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容，建议仅使用于测试页及其他非商用页面。

指定文件兼容性模式

要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。

<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>

其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置，

设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说，下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

若你已于网站服务器指定了一个预设的文件兼容性模式，你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

请查阅你的网站服务器关于指定自订标头的资讯，或看更多资料:

Implementing the META Switch on Apache
Implementing the META Switch on IIS

判定文件兼容性模式

要判定网页使用IE8浏览时的文件兼容性模式，使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

documentMode功能会回传一个数值对应目前页面的文件兼容性模式，举例来说，若网页指定为支持IE8模式，documentMode便会回传值"8"。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用，但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式，引入下面范例的这段程式码可支持旧版本的IE。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
else // IE 5-7
   {
engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
{
if (document.compatMode == "CSS1Compat")
engine = 7; // standards mode
      }
}
// the engine variable now contains the document compatibility mode.
}

认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说，你可以设定内容属性值为IE=7.5。当你这样做的时候，IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中，IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站，有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。

选择支持某个特定版本的IE，你可以确保你的页面在未来的浏览器版本中也能有显示的一致

转自：

http://www.cnblogs.com/qqflying/archive/2010/11/29/1891330.html

本文链接

JS高级拖动技术--- setCapture ，releaseCapture

2011-07-29T07:23:00Z

function drag(dv){
dv.onmousedown=function(e){
      var d=document;
      e = e || window.event;

      var x= e.layerX || e.offsetX;
      var y= e.layerY || e.offsetY;

      //设置捕获范围
      if(dv.setCapture){
          dv.setCapture();
      }else if(window.captureEvents){
          window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
      }

      d.onmousemove=function(e){
           e= e || window.event;
           if(!e.pageX)e.pageX=e.clientX;
           if(!e.pageY)e.pageY=e.clientY;
           var tx=e.pageX-x;
           var ty=e.pageY-y;

           dv.style.left=tx;
           dv.style.top=ty;
      };

      d.onmouseup=function(){
          //取消捕获范围
           if(dv.releaseCapture){
              dv.releaseCapture();
           }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
           }

          //清除事件
          d.onmousemove=null;
          d.onmouseup=null;
      };
   };
}
//-->
</script>

<div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>

--------------------------------------
setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面

转自：

http://www.cnblogs.com/Godblessyou/archive/2008/05/14/1196746.html

本文链接

转：浅说泛函与函数变换

2011-05-13T23:19:00Z

这里转一篇09年月影的关于泛函及函数变换的文章，很好的学习资料，着实学习了一下Javascript语言的灵巧强大之处。

浅说泛函与函数变换

JavaScript是函数第一型(first calss)的语言，JavaScript函数具有两重含义：它既能作为过程调用，又是一个对象。函数本身的可操作性带来了函数变换的设计思想。

函数变换和泛函

有关泛函的概念

这里借用数学的概念，简单来说，泛函就是定义域是一个函数，而值域是一个函数，推广开来，泛函就是从任意的向量空间到标量的映射。
泛函也是一种“函数”，它的独立变量一般不是通常函数的“自变量”，而是通常函数本身。泛函是函数的函数。
泛函的英文是 Functional，所以也可以把函数式编程(Functional Programming)称为泛函编程（对应在函数式编程中也把泛函称为高阶函数(higher-order function) (HOF)的）。
对JavaScript来说，一个泛函是用来完成一个函数变换的函数。由于变换的结构依然是一个JavaScript函数，所以对于JavaScript来说泛函的值域和定义域是相同的，这意味着泛函变换是可以迭代的。

利用泛函来进行函数变换

这个思路其实就是通过对函数执行某种泛函过程，把这个函数的输入和输出变为所需要的输入和输出。

使用泛函的好处

假如说在一个过程a之后接着要执行一个过程b，并且a和b的执行参数是相同的，用普通的模式来实现如下：

[复制]

Code:


function f(){
        a.apply(this, arguments);
        b.apply(this, arguments);
    }

但是问题来了，如果另一个应用里，过程a之后接着要执行一个过程c，那么：

[复制]

Code:


function f2(){
        a.apply(this, arguments);
        c.apply(this, arguments);
    }

有没有办法把这个过程合二为一呢？答案是有的：

[复制]

Code:


function comb(f1, f2){
        return function(){
                f1.apply(this, arguments), f2.apply(this, arguments);
        }
    }
    f = comb(a,b);
    f2 = comb(a,c);

在这里comb就是一个最基本的“泛函”，它返回将两个函数先后执行的函数，或者也可以看成它对两个函数作了一个“加法变换”： comb: f=f1+f2

设计实用的函数变换

函数变换是一种特殊的泛函，它是以某个函数为中心的泛函过程。
通常来说，我们认为函数变换产生新的函数，但是，如果你把JavaScript函数看作一个具有输入和输出的元件的话，那么函数变换产生的结果可以看成是改变函数的输入或输出。
在这里，我们为了简单化设计，把函数变换分成改变输入和改变输出两类，并把这两类变换称为基本变换，前面说过函数变换是可以迭代的，所以同时改变输入和输出的函数变换可以通过基本变换组合产生。

接下来，我们主要考虑函数基本变换形式。我通过事件模型来建立基本变换（其实用事件模型不是必须的，只是这么做理解起来稍微简单些）：

[复制]

Code:


function on(func, type, handler){
    return function(){
        var evtArgs = {
            args:[].slice.call(arguments), 
            type:type,
            owner:this,
            returnValue:null, 
            target:func, 
            preventDefault: function(){
                this.target = null
            }
        };

        "before" == type && handler.call(evtArgs.owner, evtArgs);
            
        if(evtArgs.target){
            evtArgs.returnValue = evtArgs.target.apply(evtArgs.owner, evtArgs.args);
            "after" == type && handler.call(evtArgs.owner, evtArgs);
        }
        return evtArgs.returnValue;
    }
}
on(fn, "before", function(evt){/*在这里你可以改变输入参数*/});
on(fn, "after", function(evt){/*在这里你可以改变返回值*/});

OK，现在我们有了第一个泛函，我在这个泛函里给函数本身增加了两个事件，在这两个事件里通过操作事件参数可以改变函数的输入参数和返回值。

现在我要先做一件事情，就是把这个泛函（它本身也是函数）给变换到Function的prototype上去：

[复制]

Code:


function methodize(fn){
    return on(fn, "before", function(evt){
        evt.args.unshift(evt.owner);
    });
}

所以methodize是我们的第二个泛函。有了它，可以做如下的事情：

[复制]

Code:


Function.prototype.methodize = methodize(methodize); //先methodize自己^_^
Function.prototype.on = on.methodize();

OK，现在泛函更加易于使用了，目前我们用到了on-before，还没有用到on-after，但是我觉得传before、after的参数显得太麻烦，因此我再写第三个泛函：

[复制]

Code:


function curry(fn, curryArgs){
    return fn.on("before",function(evt){
            var args = [];
            
            for(var i = 0, len = curryArgs.length; i < len; i++){
                if(i in curryArgs){
                    args.push(curryArgs[i]);
                }else{
                    if(evt.args.length){
                        args.push(evt.args.shift());
                    }
                }
            }
            evt.args = args.concat(evt.args);
    });
} 
Function.prototype.curry = curry.methodize();
Function.prototype.before = on.curry([,"before"]).methodize();  //注意到这里的curry和methodize其实可以互换，但是需要改变curry的参数
Function.prototype.after = on.curry([,"after"]).methodize();

curry这个泛函进行了将默认参数先赋予指定函数的一个变换。到目前为止我们的变换仅限于改变参数（通过on-before），那么改变返回值有什么用呢？

简单举一个例子，事实上，我们可以尝试着为一般函数建立一个归约(reduce)规则：

[复制]

Code:


function reduce(fn){
    return fn.after(function(evt){
        var args = evt.args.slice(evt.target.length);
        if(args.length > 0){
            if(evt.returnValue)
                args.unshift(evt.returnValue)
            evt.returnValue = reduce(evt.target).apply(evt.owner, args);
        }
    });
}

泛函reduce将函数按参数进行归约，例如：

[复制]

Code:


var add = function(x,y){
    return x+y;
}.reduce();
alert(add(1,2,3,4));  //得到10

事实上，除了reduce之外，我们还可以将函数变换作用于需要链式调用的场合，所谓链式调用即形如o.a().b().c().d()...的形式，一般来说要实现链式调用有两种情况，一种是函数自身的返回值进行包装后支持链式调用，一种是改变函数的返回值将函数的第一个参数包装后返回，无论怎样的情况，链式调用都能用基本函数变换来实现，这里就不列举了。

前面我们简单用on-before、on-after实现了多个基本函数变换，事实上，函数变换还有更复杂的形式，现在我们写一个稍稍复杂的函数变换——multi

[复制]

Code:


function multi(func){
    return function(){
        var list = arguments[0];
        if(list instanceof Array){
            
            var ret = [];
            var moreArgs = [].slice.call(arguments,1);
            for(var i = 0, len = list.length; i < len; i++){
                var r = func.apply(this, [list[i]].concat(moreArgs));
                ret.push(r);     
            }
            return ret;
        }else{
            return func.apply(this, arguments);
        }
    }
}
Function.prototype.multi = multi.methodize();

这个变换将第一个参数的list给函数依次执行，执行结果也作为列表返回。这个变换本身其实不是一个基本变换，它既改变了参数（虽然仅仅是类型发生变化），又改变了返回值，而且实际上这个变换执行的是函数的重复迭代。

[复制]

Code:


function g(o){
    return ++o.x;
}
var obj = [{x:1},{x:2},{x:3}];
obj.g = g.multi().methodize();
obj.g();  //[2,3,4]

函数变换的组合使用

实际上，在前面的介绍中我们了解了基本的函数变换，并且在例子中，其实我们在对这些变换进行组合应用，不过在组合应用时必须注意变换本身对参数造成的影响，这些影响会关系到组合变换的次序。例如你先对一个函数进行multi变换再进行methodize变换和先对一个函数进行methodize变换再进行multi变换，将得到截然不同的结果，原因是methodize变换事实上减少了输入参数的个数。

批量变换

我们建立一个map方法，就能很方便地将一组函数批量变换到要使用它的对象（或原型）上。

[复制]

Code:


var extend = function(des, src, override){
    for(var i in src){ 
        if(override || !des[i]) 
            des[i] = src[i];
    }
    return des;
};
var map = function(obj, fn, thisObj){
    var ret = {};
    for(var key in obj){
        ret[key] = fn.call(thisObj, obj[key], key, obj);
    }
    return ret;
};

现在我们建立执行批量操作的对象，或者方法集合，比如我们可以把刚才分散的Function.prototype属性赋值集中起来：

[复制]

Code:


var FunctionUtils = {
    on:on,
    reduce:reduce,
    methodize:methodize,
    after:after,
    before:before,
    curry:curry,
    multi:multi
}
extend(Function.prototype, map(FunctionUtils, methodize));

新的模式

事实上到这里我们可以建立一个新的模式，提供批量操作方法，将一组简单的函数经过复杂变换复制到我们需要这些操作的对象或集合上去。这种模式可以允许你先建立轻量的，无污染的模型，然后以某些变换组合将这些模型整理成对象或者创建类，具体细节完全可以交给你实现的函数变换器去处理。

转自：http://bbs.51js.com/viewthread.php?tid=85538

本文链接

缓存DataURI资源的解决方案

2011-02-13T04:28:00Z

在Html5中，可以将图片经过base64编码后直接写在HTML中来展示图片，使用这种方式可以减少Http请求数量，从而可加快页面展示，同时也减少了很多对服务器的压力。

例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...（此处略去N个字）...lFTkSuQmCC"/>

但这种将图片直接嵌入html中的用法，也会带来一些问题，
问题一：同样的图片无法重复使用，每使用一次都要重复输出一遍图片代码，增加了html自身大小；
问题二：假设html页面不做缓存（通常动态页面都会这么做），那么页面中引用的图片资源就无法缓存在浏览器中，相当于每次请求都会重新加载一遍图片。

由于存在着以上两个问题，就需要综合考虑是否值得使用DataURI的形式加载图片了。

这里也说明一下，使用CSS Sprites同样也能减少图片产生的大量http请求。由于CSS Sprites必须将图片用做背景，就会导致以下缺点，
一来：修改图片很不方便；
二来：经常会在html代码中包含很多空标签（只为给background提供一个展示的空间）；
三来：会丧失许多图片自身的特性。

所以如果不能使用CSS Sprites，又要解决DataURI的问题，该怎么办呢？

解决方案也很简单，
第一步：建一个img.js文件，将DataURI的数据放到一个变量里，设置一下这个img.js文件的缓存时间（这段时间浏览器不会重复加载这个文件）；
第二步：将多个图片逐个转成base64编码，全部放到img.js文件中；
第三步：在html文件中动态创建img标签，将前面变量里的DataURI数据赋给img的src（变量是固定的可以重复使用）

经过以上三步就可以达到和CSS Sprites一样的效果了（只用一个http请求即可下载多个图片，同时也可以设置图片缓存时间），但我们可以让每个图片按照图片的模式工作，从而摆脱了background的束缚。

DataURI浏览器支持情况：
Firefox 2+
Opera 7.2+ - data URI必须少于4100个字符
Chrome (all versions)
Safari (all versions)
Internet Explorer 8+ - data URI必须小于32k

附上图片转base64的php代码，仅供参考！

<?php
$file = realpath($_GET['img']);
$pathParts = pathinfo($file);
$extName = $pathParts['extension'];
if($fp = fopen($file,"rb", 0))
{
$picture = fread($fp,filesize($file));
fclose($fp);
$img = '<img src="data:image/' . $extName . ';base64,' . base64_encode($picture) . '"/>';
file_put_contents("tmp/{$pathParts['basename']}.txt", $img);
}
?>

演示：os.heimali.com（DataURI演示仅支持Webkit内核）

转自：http://yu.heimali.com/dataURI-cache.html

本文链接

体验一下小巧清爽的WebOS

2010-09-30T00:55:00Z

WebOS是一种运行在网页上的简单伪操作系统，其优势在于易于集成应用，免安装，配置完全存储在网络上，在任何地方都能轻松获取。

近日，黒玛丽WebOS和大家见面了，其完全由Javascript编写。初始页面加载只有不到28KB，其小巧程度完全可满足网络不佳地区的使用。

默认内置应用有计算器，日历，八音盒，账本，晒TV。虽然应用不是很多，但其工作模式已十分明了，应用也会随着日后开发逐渐完善。

黒玛丽WebOS的最大特点在于，所有图标都可以拖拽操作，并且也可以批量选取进行操作，同Windows操作系统操作习惯完全相同。

“快速通道”也是一个很有特色的功能，当切入文件夹后，“桌面”将显示文件夹内的内容。之前“桌面”上的所有应用都会进入“快速通道”并保留应用的配置，点击“快速通道”里的图标可恢复应用到“桌面”。

目前该系统尚不开放注册，只提供了一个测试帐号 test ，密码 111111

友情提示：黒玛丽网站不支持 IE6

本文链接

Google巴克球Logo源码公布

2010-09-12T04:48:00Z

还记得上周Google为纪念巴克球25周年公布的神奇Logo吗？

没错，Logo的实现就像巴克球一样完美。为了减小页面体积，Google对其实现代码做了压缩处理，这对于众多前端爱好者来说，的确是件糟糕透顶的事。

经过一翻努力，本人对Google的巴克球源码进行了重写，现已发布在黒玛丽网站。为了方便理解和调试，写入大量注释的同时还加入了调试窗口和控制台窗口，可以方便随时观察当前执行的动作及变量状态。

附一段巴克球的相关采访：

在讨论了一些未来的doodle之后，他们谈到了巴克球25周年的doodle，维基百科上说巴克球完全由碳组成，是在一个中空的管形球体。当Hom在白板上画了一个她理解的巴克球概念的时候，她说这看起来像是个足球嘛，让大家联想到是不是又要用到世界杯时候用到的doodle了。之后Hom说他有两个最终设计的想法。一个是加点互动，做一个圆周运动旋转的微小粒子，鼠标挪过去之后放大成一个更大的巴克球，然后用户可以用鼠标拖着它旋转。

她说团队里还没做过这个想法的设计，不成的话就做一个静态的doodle。结果当然大家都看到了，Hom的互动巴克球最终很成功。

查看原文：http://yu.heimali.com/buckyball-archive.html

演示地址：http://yu.heimali.com/buckyball.html

本文链接

你还要与僵尸共舞吗？

2010-08-08T04:01:00Z

微软在2010年3月1日宣布结束对IE6的主流支持，世界各地的IE6粉丝们在美国科罗拉多州为IE6举办了葬礼，这个发布已经8年有余的老大爷浏览器终于安详地走下舞台了。

在中国大陆，这个已经过世的僵尸依然遍布在大街小巷，大家却能够不以为然（僵尸都替你冏了）。My god，不会是最近“植物大战僵尸”太过流行的缘故吧！

IE6 像僵尸一样，散发着恶臭

截至2010年7月国内IE6比例仍高达53%（过半的人依然与僵尸共舞）

OK，如果你不想同僵尸IE6一起进棺材（大部分正常人都会这么认为，嗯，是这样的），那么好，马上升级到微软最先进的IE8好了！如果你不明白我在讲什么，请遵照下图点击“升级”（360安全卫士不用多说了吧），只要5分钟，即可轻松拜托僵尸IE6的困扰！

360软件管家升级IE6

除了IE，你还知道什么新鲜玩意吗？不只是用IE才可以上网的哦！互联网这些年涌现出了一大批更加高级，安全，快速的浏览器，在国外都已经很普及了，在此仅推荐几款主流浏览器（下图依次是 ie8，firefox，chrome，opera，safari 360软件管家均可方便下载），为了使大家更容易理解各个浏览器的特点，用几款车来做个类比是一个很不错的方式，看图！

主流浏览器汽车类比图

如果你喜欢本文，请转发给你的好友！

如果你看到有人还在使用IE6，请帮他/她升级！

本文链接

web 3D 即将到来

2010-08-07T05:54:00Z

最近apple官网的html5演示中增加了3D效果的相册，这代表着safari5 成为了第一个用css3实现3D效果的浏览器，由此可见web3D时代已指日可待。

CSS3 3D Gallery

本文主要介绍 safari5（截至2010-08-07所有其他webkit内核浏览器均还不能支持3D效果）中实现3D效果的CSS3样式

1、-webkit-perspective （3D透视属性）

应用该属性可将平面图形转换为具有远景透视效果的3D图形，该属性只能使其孩子元素产生3D，不对自身节点内容产生影响

代码实例　

<html>
    <head>
        <meta name="viewport" content="user-scalable=no, width=device-width"/>
        <title>Setting the Perspective</title>
    </head>
    <body>
        <div style="font-size: 200%; margin: 1em 1em; -webkit-perspective: 500;" >
        I have perspective.
            <div style="height: 6em; width: 6em; text-align:center; background-color: yellow; -webkit-transform: rotateY(40deg);">
            I'm 3D.
            </div>
        </div>
    </body>
</html>

使用-webkit-perspective前后对比

2、-webkit-transform-style

该属性用以表示被嵌套的元素在3D空间采用何种渲染方式（flat 或 preserve-3d），如果使用了flat（默认），那么所有子节点元素均是不再有3D效果

值得注意的是，如果你构建的3D节点树（3D tree）在其祖先节点（ancestor element）后面，有可能会无法显示出来，为了避免这种情况，请确保祖先节点的-webkit-transform-style 属性设置为 preserve-3d ，默认值是flat。

另外，那些overflow设置为hidden的节点也不能正常渲染3D效果，起将会按照flat的模式渲染。

代码实例

<div style="font-size: 200%; margin: 1em 1em;-webkit-perspective: 500;" >
  <div style="height: 8em;width: 6em;text-align:center;background-color: yellow;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(40deg);">
              I am the parent, and have perspective.
          <div style="-webkit-transform: translateZ(3em);background-color: blue;">
              I stand out from my parent element.
          </div>
  </div>
</div>

代码实例最外层div 没有 -webkit-perspective 属性，使用 -webkit-transform-style: preserve-3d 的时候的效果

代码实例最外层div 使用 -webkit-perspective 属性，同时使用 -webkit-transform-style: preserve-3d 的时候的效果

参考文档：http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Transforms/Transforms.html

本文链接