———————————————————–

@2011-1-11 迁移完成, 撒花~~ 哈哈

但是美中不足的是, 还要画一张图片. 如果要求做几个不同大小的菊花, 或者要换个颜色, 又或者要不同的地方用不同的颜色和大小的菊花, 得找到原图(psd之类的)再导出一个不同的size, 个人感觉蛋疼死了.

这次咱们用css3来画那几个点, 让它能大能小能色, 嘿嘿~~(邪恶了).

先看看效果吧, 用鼠标左键狠狠的砸这里.

菊花上有12个点, 我们用12个span标签来做, 宽高使用百分比, 用来自适应外层容器的变化, 圆角设置为100%,就可以保证显示成一个圆了.

接下来的事情就比较痛苦, 需要一个个摆到正确的位置. 但是为了以后的幸福生活哇, 咱也得硬着头皮的上是吧.

好在有了css3的选择器,我们也不用一个个给这些span起名字了,span:nth-child(1)就表示第一个span, nth-child的值是从1开始的,感觉有点怪异.

定位的话用绝对定位, 然后用负的margin把圆心偏移回去, 位置要自己算好, 具体可以看 demo.

css代码我就不贴全了,避免凑字数的嫌疑, 关键代码如下:

.loading{
    width: 50px;
    height: 50px;
}
.loading div{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-animation: auto-circle 1s linear infinite ;
    -moz-animation: auto-circle 1s linear infinite ;
}
.loading div span{
    display: block;
    background: #04AED9;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
}
.loading div span:nth-child(1){
    width: 18%;
    height: 18%;
    left: 50%;
    top: 0%;
    margin-left: -9%;
}
/* ... */

除了loading的外框, 全部值都是用百分比, 这样12个小点的大小和位置都能随着外框的大小改变而改变了, 连颜色都能随便改, 爽了吧.

后传:

某产品: 这个菊花改成16px的, 那个换成红色的.

苦逼代码男: 32px改成16px是吧, 蓝色换成红色是吧,  嗯, 改完了, 吃饭~~

某产品: …… 

既然怎么样都要画个菊花, 那不如就用canvas来画算了. 对于不支持canvas的浏览器, 可以用svg, 原理都差不多.

这个canvas动画的原理跟帧动画也类似, 先绘制第一帧的画面, 然后擦掉, 接着绘制第二帧, 以此循环. 时间间隔短的话看上去就变成动画了.

具体解释请看代码, 有足够的注释, 或者也可以点这里看看结果. canvas的api说明可以在这里找到.

window.onload = function(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    if(!ctx){
        return;
    }
    ctx.clearRect(0,0,128,128);//擦除画布
    ctx.fillStyle = 'transparent';
    ctx.fillRect(0,0,128,128);
    ctx.fillStyle = 'black'; //定义点的颜色
    var base = 0;
    var update = function(){
        ctx.save(); //把当前的绘图状态保存起来(如旋转角度的初始位置, 填充颜色, 坐标原点等)
        ctx.clearRect(0,0,128,128);//擦除画布
        ctx.translate(64, 64);//把坐标原点移动到画布中央
        base = (++base === 13) ? (base - 12) : base;//使用base来指示最大的圆点所在的位置, 实现旋转动画的效果
        var angle = Math.PI / 6;//画12个点, 所以每个点之间的角度是 1/6 PI
        var beginAngle = angle * base ;
        for(var i = 1; i <= 12; i ++){
            ctx.beginPath();//开始一个路径
            if(i === 1){
                ctx.rotate(beginAngle);
            }else{
                ctx.rotate(angle);//每次调用rotate之后, 其旋转角度并不会还原, 而是接着上一次的位置
            }
            ctx.arc(0, -48, i * 0.8 + 1, 0, 2 * Math.PI, true);//绘制一个圆点
            ctx.closePath();//闭合路径
            //如果不是用beginPath和closePath, 在调用fill方法时, 会导致画布上的所有圆都重叠在一起了
            ctx.fill();//填充(使用上面最后定义的fillStyle)
        }
        ctx.restore();//还原绘图状态, 如果不还原, 则下一次调用rotate时会接着这次的位置旋转, 而不是初始位置
    }
    update();
    setInterval(update, 50);
};

菊花系列暂时就到这里了, 有时间再去用svg整个.

这就要提到帧动画的概念了, 会flash的都知道, adobe flash软件里有个时间轴和帧的概念, 具体解释我就不说了, 可以自己google.其原理是事先把一个动画的所有动作的话出来, 然后在不同的时间点显示不同的动作, 切换的快的话看上去就动起来了.

制作菊花, 要先准备一张包含所有菊花状态的图,就像下面这张:

用一个固定大小的窗口显示这张图, 定时移动图片的位置, 就能让它动起来了. 简单的代码如下:

setInterval(function(){
    var left = parseInt(imgEl.style.left || 0) - 128;
    if(left <= -1280){
        left = 0;
    }
    imgEl.style.left = left + 'px';
}, 50);

活生生血淋淋的实例在这里.

PS: 画这10帧的菊花帧蛋疼~~

IE	Firefox	Opera	Safari	Chrome
6+	-	11.0+	3.0+	1.0+

可以看到，只有firefox和opera11一下的版本不支持这个浏览器，以此也可以放心大胆的用了。但是遇到要求高的产品经理时（╮(╯_╰)╭），就不得不考虑firefox等不支持的浏览器了，唯有使用js进行字符截断。

比较简单的截断方式就是按字符个数截断，以一个中文宽度等于两个英文宽度为前提，根据给定字符个数进行截取。但是字符在页面显示的时候，其宽度并不是一定的，会根据不同的字体和字体大小的不同而不同，更何况字母i和A的宽度是不一样的，存在bug且不够精确。

这里使用一种方法，通过给需要截取字符的节点附加一个兄弟节点（使用同样的class和style），通过计算各个字符在这个兄弟节点里面所占的宽度来限制字符个数。

代码如下：

var ellipsis = function(element){
    var limitWidth = element.clientWidth;
    var ellipsisText = '…';
    var temp = element.cloneNode(true);
    temp.id = 'checkTextLengthNode';
    temp.className = 'check-text-length-node';
    element.parentNode.appendChild(temp);
    var realWidth = temp.clientWidth;
    if(realWidth <= limitWidth){
        return;
    }
    temp.innerHTML = ellipsisText;
    var elliWidth = temp.clientWidth;

    var str = element.innerHTML;
    str = str.replace(/\s+/g, ' ');
    var s, totalWidth = 0;
    for(var i = 0, len = str.length; i < len; i++){
        s = str.charAt(i);
        temp.innerHTML = (s === ' ' ? '&nbsp;' : s);
        totalWidth += temp.clientWidth ;
        if(totalWidth + elliWidth > limitWidth){
            str = str.substr(0, i);
            break;
        }
    }
    element.innerHTML = str + ellipsisText;
    temp.parentNode.removeChild(temp);
}

处理字符的时候需要注意的两个个地方就是：

1. 在页面中连续的空格是会被当成一个空格处理的，因此要把连续的空格合并成一个；
2. 直接给innerHTML赋值空格’ ‘，其是不会占宽度的，因此要转换成html的空格表示。

通过不断添加新字符并监测添加后的宽度，就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看，这个demo对text-overflow的支持进行了检测，如果支持ellipsis，就直接使用css的，毕竟js计算能省一点是一点。检测css属性及其支持情况可以查看这篇文章。

比较明显的例子就是text-overflow这个属性，text-flow：clip是大部分浏览器都支持的，而text-flow：ellipsis则在firefox和10.6版本以下opera上工作不了，让人相当头疼。

废话少说，判断的代码如下：

var element = document.createElement('div');
if('textOverflow' in element.style){
    element.style['textOverflow'] = 'ellipsis';
    return element.style['textOverflow'] === 'ellipsis';
}else{
    return false;
}

这个判断的原理是：创建一个节点，判断其的style属性是否含有textOverflow属性，有则进一步判断是否支持ellipsis这个值。

判断是否支持ellipsis值依靠的是浏览器对于非法style值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给textOverflow赋值“ellipsis”，如果不支持，则其值肯定为空或者其它不等于“ellipsis”的值。因此只要判断赋值后的textOverflow是否等于“ellipsis”即可。

不过随着html5和css3的出炉, 我们终于可以把loading做的更加美观啦.

之前用png制作loading动画并不是没有, 但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样), 咱不熟ps, 画起来相当吃力.

而在html5/css3的带领下, 我们又有了两个新的方法: canvas和css动画.

但是我是相当讨厌用js代替css本身就可以实现的功能, 而且本人觉得在cavas上画图太累( 这不就是把ps搬到网页么…), 所以就把魔爪伸向了css3, 嘿嘿~~

使用css3的animation属性, 一句js都不用写就达到目标.

当然现在animation还没全面支持, webkit内核的浏览器支持的比较好(-webkit-animation). 另外测试时发现我的firefox6也有animation属性了, 当然要加上私有前缀(-moz-).

这个动画的原理很简单, 给png加上transform的rotate属性, 使其相对原有位置旋转,再加上animation不断的跑就行了.

代码如下:

    @-webkit-keyframes loading{
        0%{
            -webkit-transform: rotate(0deg);
        }
        50%{
            -webkit-transform: rotate(180deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }
    @-moz-keyframes loading{
        0%{
            -moz-transform: rotate(0deg);
        }
        50%{
            -moz-transform: rotate(180deg);
        }
        100%{
            -moz-transform: rotate(360deg);
        }
    }
    loading-img{
        -webkit-transform-origin: center center;
        -webkit-animation-name: loading;
        -webkit-animation-duration: 1.2s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;

        -moz-transform-origin: center center;
        -moz-animation-name: loading;
        -moz-animation-duration: 1.2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }

效果点击这里查看, 目前能在webkit内核浏览器以及firefox6(5以下没测)以上看到动画效果, 在ff6上面偶尔还有点卡, 太让人失望了╮(╯▽╰)╭~~

至于transform和animation的详细介绍, 我就不多说了, 可以点击下面的url查看:

http://www.w3.org/TR/css3-animations/

http://css3.bradshawenterprises.com/animations/

http://css3.bradshawenterprises.com/transforms/

事实上margin还有存在一个溢出的问题: 当其父节点没设置宽高的时候, 子节点的margin超出父节点而存在, 会导致父节点的left/top产生了偏移, 导致position:absolute的节点定位不准确.

我们先看下面这个例子:

<!DOCTYPE html>
<html>
<head>
     <title>Margin Overflow Test</title>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id="container">
        <div id="header">
             <h1>This is a title</h1>
        </div>
        <div id="content">
            content
        </div>
    </div>
</body>
</html>

这是一个很常见的布局: 一个container包含着一个header和content, header里面有着一个标题, 看上去一切正常, 我们给它加个样式上个色.

html, body{
	margin: 0;
	padding: 0;
}
#container{
	background: red;
	margin: 0;
        padding: 0;
}
#header{

}
#content{
	height: 200px;
	background: green;
}

这个样式也没什么好说的, 把html,body,contaner可能影响边距的值的设置为0, 并给header和content上个色区分.

现在, 问题来了, 用ie9以及ff/chrome之流打开页面, 你会看到下面这个效果

图1

可以看到, 红色的header,绿色的content都正常, 但是header上面却有一片白色区域, 明明html,body,container都去掉了. 你可以点击这里进行测试.

通过一个个节点查找发现, h1是有默认的margin的, 在ff上是相当于设置了margin: 24px 0;用firebug的html视图看就很清楚了.

图2

h1的margin-top正式图上的黄色部分,也就是图1的白色部分, 白色区域的罪魁祸首找到了, \(^o^)/~

理论上来说, h1的margin-top应该像它的margin-bottom一样,会导致header撑大的, 但是事实却不是这样,并且新浏览器都是这个表现, 难道w3c的标准就是这样规定的? 求告知.

不过问题还是要解决的, 只要给header添加1px的padding-top或者给header开头插入一个 就可以让header被h1撑开,但是个人觉得这两个方法都太过恶心, 弃之.

既然这个问题之存在标准浏览器上,那就可以使用标准的方法解决了. 方法就是给header添加一个:before伪类, 代码如下

#header:before{
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

原理是: 给header的开头插入一个字符,设置为块级元素并且高度为零和让其不可见, 就可以让header自动撑高了.

这个问题在webqq的聊天框一直存在着, 也有很多用户投诉, 具体表现为: 切换到中文输入法(ibus or other), 输入一段内容后, 第一次按下回车键可以发送消息, 之后的回车键都变成输入框的换行了.

花了一个中午排查了下, 总算找到原因了:

在ubuntu上面, 切换到中文输入法的时候, 只有第一次按下的keydown/keyup事件会被抛出, 之后都keydown和keyup事件都会被输入法接收且不会冒泡, 因此输入框没办法对按钮作出响应. 这个行为跟用什么浏览器无关, 我在firefox和chrome都发现有这个问题. 如果你的系统是ubuntu, 可以点击这里测试.

幸运的是, 经过测试, 发现keypress能响应回车键(以及其他ctrl+v等没触发出中文输入法的键盘行为), 因此可以把监听回车事件的代码转移到keypress中, 解决掉这个存留已久的bug.

注意: opera的keypress事件是没有charCode的, 且keyCode与keydown/keyup事件的keyCode一致, 无语…

2011-6-6 更新:

通过对ubuntu下面的firefox,chrome,opera测试, 有两个发现:

1. 启用了中文输入法就会监听不到keydown的问题只出现在firefox上面
2. opera的keypress事件的keyCode与keydown的keyCode一致的情况只出现在window版本上, ubuntu的版本没发现该问题

因此, ubuntu的兼容就只用对firefox进行处理.

如果你的是chrome, 点击这里查看demo. 这个问题相当诡异, 如下:

1. 改成2px, border出来了!

2. 改成solid, 又出来了!

3. 高度低于4096, 呃, 又出来了…不过还是少了一些点, 改成4095就很正常了…

暂时还没有找到解决办法, chrome处理超过2的40次方之后的数字溢出了, chromium的项目里已经看到有人提了bug, 但是到目前为止(chrome 12.0.733.0)依然如此. 也许某天google大神心情好了, 会fix它吧. ╮(╯_╰)╭