博客园_Ruby's Louvre

javascript 瀑布流

2012-02-06T06:43:00Z

现在图片网与商城流行一种叫“瀑布流”的布局，我们公司也不小心得了“流行性感冒”，要搞这个。于是我就写了一个，现在再用我的框架mass重写一下，发布出来，顺便宣传一下我的框架。

瀑布流其实没什么东西，就是列布局与无限拖的结合。由于要支持IE6就没有CSS3，直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题，我管它为砖头。每添加一块砖头前，比较一下哪列最短，就往哪里塞。最后就是无限拖，太easy了。加之，我的框架对样式，事件等设置非常简单，比jQuery更方便。

下面就是源码，用到了并行加载技术，预设时加载了random,ready,css,event这几个模块，它们就会自行加载其依赖模块了。

$.require("more/random,ready,css,event",function(random){
                //容器的CSS表达式，列数，每列的宽度
                var Waterfall = function(expr, col, colWidth){
                    //构建整体轮廓
                    var container = this.container = $(expr);
                    var pw = container.width();//容器的宽
                    var gw = (pw - col * colWidth)/(col-1);//列间距离
                    this.colWidth = colWidth;
                    this.cols = [];
                    for(var i = 0; i < col ; i++){//随机生成列
                        this.cols[i] = $("<div class='waterfall' />").css({
                            position: "absolute",
                            top: 0,
                            left: (colWidth + gw) * i,
                            width: colWidth,
                            backgroundColor: random.hex()
                        }).appendTo(container);
                    }
                }
                Waterfall.prototype = {
                    //添加板块
                    addBlocks : function(){
                        for(var i = 0; i < 40; i++){//随机生成40个板砖
                            $("<div class='waterfall_block' />").css({
                                margin: 5,
                                width: this.colWidth - 10 ,
                                height: random.num(80, 300),
                                backgroundColor: random.hex()
                            }).appendTo( this.whichCol() );
                        }
                    },
                    //计算出最短的栏栅
                    whichCol:function(el, ret, h){
                        for(var i = 0, shortest = 0; el = this.cols[i]; i++){
                            h = el.height();
                            if(i == 0){
                                shortest = h;
                                ret = el;
                            }
                            if(h < shortest ){
                                shortest = h;
                                ret = el;
                            }
                        }
                        return ret;
                    }
                };

                var waterfall = new Waterfall("body",4,300)
                waterfall.addBlocks();
                $(window).scroll(function(){
                    var clientHeight = $(window).height(),
                    scrollTop = $(window).scrollTop(),
                    scrollHeight = $(document).height();
                    if(clientHeight + scrollTop >=  scrollHeight ){
                        waterfall.addBlocks();
                    }
                })
            })

源码放于github中，暂时我们只有到client这部分的代码。

IE下如果报错，请它刷新页面

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>瀑布流</title>
        <script src="https://raw.github.com/RubyLouvre/mass-Framework/master/client/mass.js"></script>
        <script>
            window.onerror = function(){
               location.reload();//如果报错，请它自动刷新。
            }
            $.require("more/random,ready,css,event",function(random){
                //容器的CSS表达式，列数，每列的宽度
                var Waterfall = function(expr, col, colWidth){
                    //构建整体轮廓
                    var container = this.container = $(expr);
                    var pw = container.width();//容器的宽
                    var gw = (pw - col * colWidth)/(col-1);//列间距离
                    this.colWidth = colWidth;
                    this.cols = [];
                    for(var i = 0; i < col ; i++){//随机生成列
                        this.cols[i] = $("<div class='waterfall' />").css({
                            position: "absolute",
                            top: 0,
                            left: (colWidth + gw) * i,
                            width: colWidth,
                            backgroundColor: random.hex()
                        }).appendTo(container);
                    }
                }
                Waterfall.prototype = {
                    //添加板块
                    addBlocks : function(){
                        for(var i = 0; i < 40; i++){//随机生成40个板砖
                            $("<div class='waterfall_block' />").css({
                                margin: 5,
                                width: this.colWidth - 10 ,
                                height: random.num(80, 300),
                                backgroundColor: random.hex()
                            }).appendTo( this.whichCol() );
                        }
                    },
                    //计算出最短的栏栅
                    whichCol:function(el, ret, h){
                        for(var i = 0, shortest = 0; el = this.cols[i]; i++){
                            h = el.height();
                            if(i == 0){
                                shortest = h;
                                ret = el;
                            }
                            if(h < shortest ){
                                shortest = h;
                                ret = el;
                            }
                        }
                        return ret;
                    }
                };

                var waterfall = new Waterfall("body",4,300)
                waterfall.addBlocks();
                $(window).scroll(function(){
                    var clientHeight = $(window).height(),
                    scrollTop = $(window).scrollTop(),
                    scrollHeight = $(document).height();
                    if(clientHeight + scrollTop >=  scrollHeight ){
                        waterfall.addBlocks();
                    }
                })
            })
        </script>
    </head>
    <body>
        <p>
            瀑布流 by 司徒正美
        </p>
    </body>
</html>

最后附上微博上对它的评论：Pinterest创造的瀑布流样式，有几个预设前提：1、图片极重要，文字不重要；2、用户浏览无明确目的，对复杂的索引无依赖性；3、图片整体美观度较高。因此恰恰适合Pinterest这样的“好图挖掘与收藏网站”。最近几个月国内跟风瀑布流，也太盲目了些。

本文链接

(转)HTML5 全屏 API

2012-02-05T13:56:00Z

注：提 HTML5 只是说明他是一项新的东西，至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套？我们不纠结。不如看这个接口能给我带来什么，思考可以如何给网页做个体验上的增强应用吧。

一、说在前面的

其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个，在 iPhone 上访问 youku 上的一个视频：

我们可以点击中间这个大大的放映按钮，这里 iOS 里的 safari 会把影片全屏显示，使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图：

二、FullScreen JavaScript API 具体使用

1、JavaScript API

FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用，我们可以先看看下面的代码：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 

// Firefox 10
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

只有两个方法，在需要调用全屏的元素调用 requestFullscreen() 方法，在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大，只是命名上的不同。

只是，厂商前缀，各浏览器的实现和 W3C 不一致，代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点，红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的，何必改掉命名。既然发，为什么不把 request 发成 enter 与 exit 对应？！。无论如何，至少可以实现，目前 IE 仍没有决定要不要实现这个草案，Johndyer 这样说：“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~

在这里吐槽也没什么用，我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提，只是略过，这一段来自 Johndyer 的代码，使用的是 Mozilla 的提案，具体使用还需要具体对待：

// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange

// W3C Method:
element.addEventListener('fullscreenchange', function(e) {
    if (document.fullScreen) {
       /* make it look good for fullscreen */
    } else {
       /* return to the normal state in page */
    }
}, true);

2. CSS 选择器：:fullscreen / :fullscreen-ancestor

这两个选择器的作用是这样的：

:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素

对于 :fullscreen 还是比较好理解的，但对于 fullscreen-ancestor 要选出它的全家，而不仅仅是父节点，似乎不能理解其他使用。其实，看一下官方草案提供的 Demo 代码，就知道了：可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢？这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧：

:fullscreen {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483647;
  background:black;
  width:100%;
  height:100%;
}
/* If there is a fullscreen element that is not the root then
   we should hide the viewport scrollbar. */
:fullscreen-ancestor:root {
  overflow:hidden;
}
:fullscreen-ancestor {
  /* Ancestors of a fullscreen element should not induce stacking contexts
     that would prevent the fullscreen element from being on top. */
  z-index:auto;
  /* Ancestors of a fullscreen element should not be partially transparent,
     since that would apply to the fullscreen element and make the page visible
     behind it. It would also create a pseudo-stacking-context that would let content
     draw on top of the fullscreen element. */
  opacity:1;
  /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or
     filtering, since that would affect the fullscreen element and create a pseudo-
     stacking context. */
  mask:none;
  clip:none;
  filter:none;
  transform:none;
}

3. HTML 标签属性: allowFullScreen

像 flash 使用的 <object> 和 <embed> 可以设置是否允许全屏，现在这个特性同样可以应用于 <iframe> 标签。只要添加 allowFullScreen 属性即可：

<!-- content from another site that is allowed to use the fullscreen command -->
<iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""></iframe>

三、解决方案

一般来说，全屏主要应用还是在视频和游戏。当然，也可以实现像 Mac Lion 一样的全屏显示，就像 Preview.app，全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持)，Chrome 15， Safari 5.1 可以使用 Johndyer 的 jQuery 插件：https://gist.github.com/1354468

四、总结

目前遇到的问题可能是：

IE 对这个功能的实现没有安排
全屏在 Mac 下是浏览器全屏还是内置实现的全屏？Chrome 实现的是 Lion 内置的全屏，而 Safari 本身实现的是浏览器自身的全屏。
安全问题，全屏下伪造一个系统登陆框？
是否所有元素都应该被全屏内容盖住？

似乎第 1 点和第 3 点是我们比较关注的，也需要去关注的。反而对于 API 的调用是比较简单的，不需要那么多思考。

引用 DEMO: Fullscreen JavaScript API

五、引用文档

1. 参考事件的处理：Let Your Content Do the Talking: Fullscreen API
2. 大部分代码引用这篇文章：Native Fullscreen JavaScript API (plus jQuery plugin)
3. 历史和讨论：Fullscreen HTML5 video
4. 标准与厂商对比：W3C Draft: Fullscreen

本文链接

(转)用CSS3移除点击交互元素的高亮背景

2012-02-05T13:41:00Z

我在移动设备上测试前面教程的图表实例时发现，当手指点击图表出现ToolTip时，图表容器的会出现一个半透明的高亮背景。设备浏览器不一样，颜色也不一样，很是影响交互效果。试了一下用Javascript来移除，花了一天时间也没弄出来，最后不得不Google了，又花了几个小时，终于用CSS3搞定了。

代码如下：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新加了禁止选择文本的功能。其中，前二句对WebKit内核浏览器(Safari、Chrome、iPhone、iPad、Android等)有效，后二句对Gecko内核的浏览器(Firefox等)有效。

看来真该花些时间学学CSS3了。

本文链接

新锐浏览器支持原生CustomEvent事件

2012-02-05T05:24:00Z

在safari5, firefox6, opera1.60, chrome10？支持CustomEvent事件。

document.addEventListener('ping', function(ev) {
                    alert(ev.detail[0]);
                }, false);

                var evt = document.createEvent('CustomEvent');
                evt.initCustomEvent('ping', false, false, [30, 50 ]);
                document.dispatchEvent(evt);

它会将initCustomEvent的第四个参数当作事件对象的detail属性。

本文链接

javascript题目，如何在重写alert后还能正常弹出alert

2012-02-03T01:21:00Z

今天在群里遇到一道很有意思的题目，大家发挥所能，给出的答案五花八门。特意整理成博文发表出来：

//原题目：
window.alert = function(){};______;alert(1); 填空，使后面的alert(1)能正确弹出，至少列举两种不同思路。

解法一，创建新的执行环境，使用iframe沙箱

window.alert = function(){};
window.alert=function(obj){
    var iframe=document.createElement("iframe");
    iframe.src="javascript:void(0);"
    document.body.appendChild(iframe)
    iframe.contentWindow.alert(obj);
}
alert(1)

解法二，创建新的执行环境，打开新窗口

window.alert = function(){};
window.alert = function(a){
    window.open('','').alert(a)
    //window.createPopup().document.parentWindow.alert(a) //IE only
}
alert(1);

解法三, 弄回原来的alert（IE下失败）

window.alert = function(){};
window.alert = function(a){
    delete window.alert;
    window.alert(a);
}
alert(1);

解法四，思路同三（IE下失败）

window.alert = function(){};
window.alert = function(a){
   window.__proto__.alert.call(window,a);
  //window.constructor.prototype.alert.call(window,a);
}
 alert(1);

解法五（IE only）

window.alert = function(){};
execScript('sub alert(msg):msgbox msg:end sub', 'vbscript');
alert(1);

解法六，就是一晕招

window.alert = function(){};
window.alert = function(a){
    window.confirm(a)
}
alert(1);

本文链接

mass Framework support模块 v2

2012-01-31T02:30:00Z

这是统一进行各种特征检测的模块。这些检测的值，如果存在对应DOM API并且其行为与大多数标准浏览器的行为一致为true，否则为false。false值越多说明该浏览器越落后，在我的测试列表中，FF9是做得最好的，全部为true，最差的不用说是哪个吧。就算是IE9也不尽人意，我还是需要为它做N多兼容代码。webkit系的也没有想象中的好。标准化之路任重道远啊。

本版本的改进:

发现boxModel，inlineBlock，keepSize，cssPercentedMargin这些特征必须等到domReady后才能检测，因此做了迟时处理。
一些特征进行了改名，cloneAll更名为cloneNode，attrSelected更名为optSelected，inlineBlockNeedsLayout 更名为inlineBlock, shrinkWrapBlocks更名为keepSize。
去掉reliableHiddenOffsets，增加cssPercentedMargin,cloneHTML5,cloneChecked。

下面是mass Framework需要嗅探的特征一览表:

名称	详明
insertTbody	标准浏览器只有在table与tr之间不存在tbody的情况下添加tbody，而IE678则笨多了,即在里面为空也乱加tbody
checkOn	在大多数游览器中checkbox的value默认为on，唯有chrome返回空字符串
optSelected	当为select元素添加一个新option元素时，此option会被选中，但IE与早期的safari却没有这样做,需要访问一下其父元素后才能让它处于选中状态（bug）
optDisabled	判定disabled的select元素内部的option元素是否也有diabled属性，没有才是标准
attrHref	IE67无法区分href属性与特性（bug）
attrStyle	IE67是没有style特性（特性的值的类型为文本），只有el.style（CSSStyleDeclaration）(bug)
attrProp	对于一些特殊的特性，如class, for, char，IE67需要通过映射方式才能使用getAttribute才能取到值(bug)
cssOpacity	是否能正确返回opacity的样式值
traverseAll	IE678的getElementByTagName("*")无法遍历出Object元素下的param元素（bug）
createAll	IE678不能通过innerHTML生成link,style,script节点（bug）
cloneHTML5	IE6789由于无法识别HTML5的新标签，因此复制这些新元素时也不正确（bug）
cloneNode	在标准浏览器下，cloneNode(true)是不复制事件的，以防止循环引用无法释放内存，而IE却没有考虑到这一点，把事件复制了（inconformity）
cloneChecked	IE6789的checkbox、radio控件在cloneNode(true)后，新元素没有继承原来的checked属性（bug）
fastFragment	fastFragment 是否支持createContextualFragment API，此方法发端于FF3，因此许多浏览器不支持或实现存在BUG，但它是将字符串转换为文档碎片的最高效手段
inlineBlock	在IE678中，非替换元素在设置了大小与hasLayout的情况下，会将其父级元素撑大（inconformity）
cssPercentedMargin	getComputedStyle API是否能支持将margin的百分比原始值自动转换为像素值
boxModel	是否遵循w3c的盒子boxModel去计算元素的大小(IE存在怪异模式,inconformity)

源码地址

本文链接

我的模块加载系统 v15

2012-01-30T12:17:00Z

本次改进是沿着上次的思路，让定义模块名尽量的短，然后只要保证请求时路径正确，那么它就会内部非常智能修正这个模块的名字，自动加上路径。至于这些模块叫什么名字，有什么属性，可以查看框架的系统属性@modules。尽管v14做得的改进非常人性化，但毕竟初次试水，还有许多不足与BUGs。v15就是在这方面进行了改良，原先模块名的修正逻辑是写define方法中，现在转移到一个叫innerDefine的方法中，并让其在临时生成的iframe沙箱环境中执行，确保没有改错。另外，v15，还对许多内部函数与私有属性进行更名，让其更加秀气易懂。下面是改进详情：

用于保存需要处理的模块名列表的内部数组 names 改名为 tokens（令牌集）。
相对应，原来叫name或_name的变量与属性名也改名为 token(令牌)。
用于收集各个模块的返回值的内部对象 rets 改名为 transfer(中转器)。
用于保存每个模块的信息的对象map 更名 mapper。
用于转换iframe执行环境中生成的函数的内部函数 safeEval 改名为assemble（装配）。assemble比原来的safeEval 职责更加单一，收集依赖列表对应模块的返回值，传入目标模块中执行。
添加innerDefine 方法，它用于处理iframe沙箱环境中通过script节点加载回来的$.define，它也相当于一个中转器，但会将其第一个参数（模块名）修正一下，加上相对路径，并且将callback重新解析为父窗口的函数实例（这相当于原来safeEval的工作），最后才交给父窗口的命名空间对象的define方法去处理。
用于创建沙箱环境加载子模块的内部方法 loadModule 更名为 load，并且在其内部字符串拼接部分进行大重构。
用于判定某一模块的依赖列表是否都加载成功的内部函数_resolveCallbacks，更名为_checkDeps。
另外，_checkFail方法也做了些许改良，确保命名空间改名后报“找不到对象”错误。

v15借助于innerDefine来校正模块名的思路，其实已经很好地解决了业界AMD的匿名模块难题。但mass Framework作为一个大规模开发的框架，还要考虑一下JS文件合并的情况。因此$.define的第一个参数——模块名还是保留下来。这也有出于向前兼容的考虑。

最后举个例子说明v14与v15做了什么魔术吧。在KISSY中定义一个位于另一个文件夹的JS模块，需要指定路径，来防止重名。如aaa文件夹下有个test模块，bbb文件夹下也有一个test模块。定义时是这样进行区分的：

KISSY.add('aaa/test', function () {
//....aaa/test略
});
KISSY.add('bbb/test', function () {
//....bbb/test略
});
KISSY.use('aaa/test', function () {
//....略
});
KISSY.use('bbb/test', function () {
//....略
});

而从mass Framework的v14开始，则可以省略路径，如果不考虑服务器合并JS文件的情况，模块名叫什么也没所谓，因为请求模块时的路径就会被innerDefine改为其“正确”的模块名！它这种特性非常有利于我们在项目对目录结构的重构。

$.define('test', function () {
//....aaa/test略
});
$.define('test', function () {
//....bbb/test略
});
$.require("aaa/test",function(){
//....略
});
$.require("bbb/test",function(){
//....略
});

源码地址

css3 变形

2012-01-21T04:54:00Z

CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多。利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效。

rotate(旋转)

rotate(angle)
rotate3d(x ,y ,z ,angle)
rotateX(angle) 单独设定 rX 轴的角度。
rotateY(angle) 单独设定 rY 轴的角度。
rotateZ(angle) 单独设定 rZ 轴的角度。

其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

IE下可以使用BasicImage滤镜，但其rotate参数有个天然的缺陷只能取四个值

0 不旋转
1 顺时钟旋转90度
2 顺时钟旋转180度
3 顺时钟旋转270度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom Framework by 司徒正美</title> <style> .box{ width:200px; height: 200px; background: red; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -ms-filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } </style> </head> <body> <h3>CSS3 transfrom rorate旋转 by 司徒正美</h3> <div > 测试 </div> </body> </html>

这时我们就要动用万能的矩阵滤镜了DXImageTransform.Microsoft.Matrix。

//在IE旋转任意角度 by 司徒正美
      function rorateIt(node,deg){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos;          
        filter.M12 = -sin;         
        filter.M21 = sin;           
        filter.M22 = cos;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        node.style.marginLeft = cx1 - cx + "px";
        node.style.marginTop  = cy1 - cy + "px";
   
      }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework by 司徒正美</title>
    <script>
      function rorateIt(node,deg){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos;          
        filter.M12 = -sin;         
        filter.M21 = sin;           
        filter.M22 = cos;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        node.style.marginLeft = cx1 - cx + "px";
        node.style.marginTop  = cy1 - cy + "px";
   
      }
    </script>
    <style>
      .box{
        width:200px;
        height: 200px;
        background: red;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h3>CSS3 transfrom rorate旋转 v2 by 司徒正美</h3>
    <div  onclick="rorateIt(this,45);rorateIt=function(){}">
      IE中请点一下
    </div>
  </body>
</html>

scale(缩放)

scale(x,y) 设定 X 轴与 Y 轴的缩放量。
scale3d(z) 设定 X 轴、Y 轴与 Z 轴的缩放量。
scaleX(x) 单独设定 X 轴的缩放量。
scaleY(y) 单独设定 Y 轴的缩放量。
scaleZ(z) 单独设定 Z 轴的缩放量。

在IE下，我们可以使用zoom对元素按比例缩放，如果是图片我们还可以使用DXImageTransform.Microsoft.AlphaImageLoader

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dom Framework by 司徒正美</title>
    <script>
      function scaleIt(node,scaleX,scaleY){
        //取得末变形前矩形的中点
        var rect = node.getBoundingClientRect(),
        cx1 = (rect.right  - rect.left) / 2, // center x
        cy1 = (rect.bottom - rect.top)  / 2, // center y
        deg2rad =  Math.PI / 180,//角度转弧度
        deg = 0,scaleX = scaleX || 1,scaleY = scaleY || 1,
        rad = deg * deg2rad ,
        cos = Math.cos(rad),
        sin = Math.sin(rad);
        var ident  = "DXImageTransform.Microsoft.Matrix";
        node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')";
        //http://www.satzansatz.de/cssd/onhavinglayout.html
        if(!node.currentStyle.hasLayout){//在IE7中，如果没有获得hasLayout，滤镜会失效
          node.style.writingMode  = "tb-rl";
        }   
        var filter = node.filters.item(ident);
        //  +-------+-------+
        //  |  M11  |  M12  |
        //  +-------+-------+
        //  |  M21  |  M22  |
        //  +-------+-------+
        filter.M11 = cos * scaleX;          
        filter.M12 = -sin * scaleY;         
        filter.M21 = sin * scaleX;           
        filter.M22 = cos * scaleY;          
        //取得当前中心
        rect = node.getBoundingClientRect();
        var cx = (rect.right  - rect.left) / 2;
        var cy = (rect.bottom - rect.top)  / 2;
        //调整此元素的坐标系，实现CSS3 transform-origin的功能
        //  node.style.marginLeft = cx1 - cx + "px";
        //  node.style.marginTop  = cy1 - cy + "px";
   
      }
      window.onload = function(){
        if(window.VBArray){
          var dom = function(id){
            return document.getElementById(id)
          }
          scaleIt(dom("box1"),2,2)
          scaleIt(dom("box2"),2,1)
          scaleIt(dom("box3"),-2,1)
        }
      }
    </script>
    <style>
      .box{
        width:40px;
        height: 40px;
        background: red;
        border: 1px solid green;
        margin: 40px;
      }

      #box1{
        /* box1元素的宽和高都会被放大双倍 */
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
      }

      #box2 {
        /* box2元素的宽会是双倍，而高度保持不变 */ 
        -webkit-transform: scale(2, 1); 
        -moz-transform: scale(2, 1);
      }
      #box3 {
        /* box3的宽度将是双倍，并且水平翻转，但是高度保持不变 */ 
        -webkit-transform: scale(-2, 1); 
        -moz-transform: scale(-2, 1); 
      }
    </style>
  </head>
  <body>
    <h3>CSS3 transfrom rorate缩放 by 司徒正美</h3>
    <div  id="box1" >
      box1
    </div>
    <div  id="box2" >
      box1
    </div>
    <div  id="box3" >
      box1
    </div>


  </body>
</html>

translate(位移)

translate(x,y) 设定 X 轴与 Y 轴的偏移量。
translate3d(x,y,z) 设定 X 轴、Y 轴与 Z 轴的偏移量。
translateX(x) 单独设定 X 轴的偏移量。
translateY(y) 单独设定 Y 轴的偏移量。
translateZ(z) 单独设定 Z 轴的偏移量。

这相当CSS2.1时原有的相对定位。

参考

http://blog.hinablue.me/entry/CSS3-note-css3-transform-matrix-note
http://blog.beyes.tw/500
http://jquery.org.cn/css/css3preview/Transform.html
http://www.useragentman.com/IETransformsTranslator/
https://github.com/heygrady/transform

本文链接

Windows 上使用 Github

2012-01-20T06:05:00Z

安装使用

1.下载msysgit

http://code.google.com/p/msysgit/

2.下载tortoisegit客户端安装

http://code.google.com/p/tortoisegit/

最新版TortoiseGit好像已经包含了Puttygen项目（用于生成SSH密钥的）

如果自己没有github，则先到上面注册个帐号，然后搞个项目。这些都很简单，不详述。

然后在window的开始菜单找到TortoiseGit，然后打开里面的Puttygen，点击生成按钮，最大的那个文本区就显示公钥，然后复制这些内容，打开Github中Account Setting页面里的SSH Public Key 选项卡，选择 Add another public key ，将刚才复制的公钥复制进去，随便起个名字，提交；

再点击Puttygen下方“保存私钥”的按钮，随便改个名字保存到本地，然后在TortoiseGit目录中找到Pageant，将刚才私钥文件提交上去。

在Github的 Dashboard 页面的 Your Repositories 栏目下可以找到自己创建的那个项目，点击进去。能得到该项目的 Git 地址，比如我创建的 /mass-Framework 地址就是：

git@github.com:RubyLouvre/mass-Framework.git

找到你要放置项目的地方，右键选择 Git Clone , Url 处填入刚才那个地址，点击 “OK” ，项目就应该在本地成功建立了。

（转）透彻理解块级元素的宽度

2012-01-18T05:25:00Z

作者按：又翻出来一篇5年前（2006年12月28日）写的关于盒模型的文章，都不知道参考了哪本书了。只能凭印象感谢 Eric Meyer 的《CSS权威指南（第2版）》（The Definitive Guide, 2nd Edition）——因为当时作为练习刚翻译完这本书。

内容提要
透彻掌握CSS可视化模型的原理，可以让我们准确判断某个意外行为到底是因为CSS样式问题，还是CSS解析引擎问题。本文要讨论的要点是，当margin-left、width和margin-right这三个属性分别取auto值或大于0的值，进而形成不同组合的情况下，如何确定块级元素中各个组成部分的宽度。

块级元素和行内元素

CSS把处在正常文档流中的不同html元素区分为块级元素（block element）和行内元素（inline element）。一般来说，所谓块级元素就是指当它们显示在浏览器中时，会在自身前后各插入一个空行，而使自身在页面中占据一个相对独立的块状区域的元素。因此，HTML文档中连续的块级元素的典型显示方式就是“堆叠”。块级元素的例子有h1到h6、div、p等。而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小，并且可以与其他行内元素共处一行的元素。行内元素的典型显示方式就是“连接”。行内元素的例子有a、img、span、input等。对于行内元素，又可以进一步分为可替换行内元素和不可替换行内元素，两者的区别在于元素中所包含的内容是否直接显示在页面中。不可替换的行内元素，如a元素中的链接文本会直接显示在网页中；而可替换的行内元素，如img，当它在网页中显示时会被其src属性指向的图像替代。本文讨论的是块级元素，有关行内元素的更多内容请参考其他资料。

正常文档流
指的是HTML文档元素在进行内容布局时所遵循的从左到右、从上到下的表现方式。这种文档流布局的方式对于某些语言可能会有所不同（比如从右往左阅读的语言）。HTML中的大多数元素都处在正常的文档流中，而一个元素要脱离正常流的唯一途径就是浮动或定位。

块级元素的宽度

块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width属性来表示（或设置）。

图1简单的盒模型示意图

有一个简单的规则，就是块级元素的宽度总是等于其父元素内容区的宽度。如果一个div元素的父元素是body，那么这个div元素的宽度就等于body的宽度，也就是浏览器中窗口的宽度。一个处在正常文档流中的块级元素，其宽度是由七个部分共同决定的。可以称为块级元素的水平“七属性”，它们分别是：

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

图2 块级元素的水平“七属性”

如图2所示，块级元素在水平方向上的宽度是由七个CSS属性共同决定的。例如，一个div元素中包含一个p元素。而div元素的宽度是500px，那么这个p元素内容区的宽度（width）加上其左右内边距、左右边框和左右外边距之和就等于500px。这个计算过程用公式表示，就是：

margin-left + 
border-left + 
padding-left + 
width + 
padding-right + 
border-right + 
margin-right 
= 500px

自动水平属性如何决定块级元素的宽度

在块级元素的水平七属性中，只有三个属性可以使用auto（自动）值，如图3所示。

图3 可以取auto值的水平属性

也就是说，只有margin-left、width和margin-right这三个属性可以使用auto值。这正是本文要讨论的核心问题，即在上述三个属性分别取不同的auto值和长度值，形成不同组合的情况下，相应块级元素盒子中各部分的宽度是如何确定的？

在掌握了各种组合的可能性和相应结果的基础上，我们就可以在遇到意外的情况时，对到底是CSS样式的问题，还是CSS解析引擎的问题作出正确的判断。并根据判断来决定是修改CSS样式、向浏览器提供商报告bug，还是采取过滤或hack手段来解决问题。

现在举例子说明，假设有如下简单的html代码：

<div>
    <p> </p>
</div>

而相应有8种可能的CSS规则：

1. p { margin-left:auto;width:auto;margin-right:auto; }
2. p { margin-left:50px;width:auto;margin-right:auto; }
3. p { margin-left:auto;width:auto;margin-right:50px; }
4. p { margin-left:50px;width:auto;margin-right:50px; }
5. p { margin-left:auto;width:200px;margin-right:auto; }
6. p { margin-left:50px;width:200px;margin-right:auto; }
7. p { margin-left:auto;width:200px;margin-right:50px; }
8. p { margin-left:50px;width:200px;margin-right:50px; }

将这8种可能的CSS规则应用到上面的标记以后，会得到如图3所示的结果（图中为父元素div添加了边框，而为了表示内容区的宽度，也为p元素添加了背景）。

图4 自动宽度的8种可能性

下面，我们就来逐一分析这8种情况：

第一种情况：

规则是 p { margin-left:auto;width:auto;margin-right:auto; }

即，三个属性全都取auto值。如图3所示，结果是p元素的内容区的宽度和父元素div的宽度相等。根据前面的公式（此例未考虑左右边框和内边距，假设它们全取默认值0）我们知道，此时的margin-left:auto和margin-right:auto等同于margin-left:0和margin-right:0。或者说此时的左右外边距都等于0。

第二种情况：

规则是 p { margin-left:50px;width:auto;margin-right:auto; }

即，把左外边距明确设置为50像素，width和margin-right的值仍然是auto。如图3所示，结果是p元素的内容区宽度等于div元素的宽度减去50像素。也就是说，此时左外边距是50像素，而margin-right:auto相当于margin-right:0，即右外边距为0。

第三种情况：

规则是 p { margin-left:auto;width:auto;margin-right:50px; }

与第二种情况类似，只不过是把右外边距而不是左外边距明确设置为50像素。图3所示的结果告诉我们，此时右外边距是50像素，而左外边距为0。
（以上三种情况，值为auto的外边距都被重置为默认值0）

第四种情况：

规则是 p { margin-left:50px;width:auto;margin-right:50px; }

这次是把左、右外边距都明确地设置为50像素，而只有width属性是auto。如图3所示，结果是p元素内容区的宽度等于div的宽度减去（50+50=）100像素。也就是说，50像素的左、右外边距是有效的。p元素内容区在左右外边距之间以自动适应的宽度值补足了div元素的宽度。

第五种情况：

规则是 p { margin-left:auto;width:200px;margin-right:auto; }

这次把左、右外边距都设置为auto，而把width明确地设置为200像素。如图3所示，结果是p元素的内容区宽度就是设置的200像素，而且，由于左右外边距同为auto，使得p元素在div元素中水平居中。这种情况也是网页布局中最常用的居中块级元素居的主要手段。

第六种情况：

规则是 p { margin-left:50px;width:200px;margin-right:auto; }

这次margin-left和width分别明确设置成了50px和200px，只有右外边距的值是auto。从图3中可以看到，结果是p元素的内容区就是设置的200像素，而左外边距也是设置的50像素。但右外边距此时在前两个部分之后以自动适应的宽度值补足了div元素的宽度。

第七种情况：

规则是 p { margin-left:auto;width:200px;margin-right:50px; }

与第六种情况相似，但这次是左外边距在后两个部分之前以自动适应的宽度值补足了div元素的宽度。

第八种情况：

规则是 p { margin-left:50px;width:200px;margin-right:50px; }

这是一种典型的情况，即三个属性都明确地设置相应的值。从图3的结果中我们看到，只有左外边距和p元素内容区的宽度是设置的值。右外边距虽然也明确设置了50像素的值，但实际情况就像是使用了auto的第六种情况一样。实际上，在三个属性都明确设置了值，但其中一个值在没有解的情况下－－即在不能满足三者之和等于div元素宽度的情况下－－在从左往右阅读的语言中，会把右外边距重置为自动适应的宽度值，也就是auto。

小结

通过对以上8种可能情况的逐一分析，我们可以得出如下结论：

在width属性的值设置成auto的情况下，块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto，则左右外边距的值都会被重置为默认的值0；如果左右外边距中只有一个值是auto，则该值被重置为0，另一个值有效；如果左右外边距都设置了明确的值，两个值都将有效，此时元素内容区的宽度就是父元素的宽度减去左右外边距后的值。需要说明的是，左右外边距的默认值是0，这意味着如果没有在CSS规则中声明margin-left或者margin-right，它们就会使用默认值0。
在width属性的值设置为大于0的值的情况下，块级元素内容区的宽度就是由width属性设置的值。此时，左右外边距的值如果都是auto，则会使块级元素在其父元素中居中；如果左右外边距中只有一个值是auto，则明确设置的值有效，auto值会自动适应剩余的宽度；如果左右外边距都设置了明确的值，那么在从左往右阅读的语言中，会把右外边距的值重置为auto。

（注：本文所说“设置明确的值”，是指设置了大于0的值）

以下是今天（2012年1月17日）在Chrome中做的一个测试的截图。

本文链接