话说上三回, 我们用css3的animation让png图片动起来了.

但是美中不足的是, 还要画一张图片. 如果要求做几个不同大小的菊花, 或者要换个颜色, 又或者要不同的地方用不同的颜色和大小的菊花, 得找到原图(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是吧, 蓝色换成红色是吧,  嗯, 改完了, 吃饭~~

某产品: …… 

上回说到用png图片来做帧动画, 总的来说也没什么大问题, 但是画个菊花, 按固定角度旋转N次做图实在是蛋疼.

既然怎么样都要画个菊花, 那不如就用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整个.

话说上回说到使用css3的animation来制止png格式的菊花, 但是目前之后新版的firefox和webkit核心浏览器才支持该动画, 那其他浏览器也想用png动画怎么办呢?

这就要提到帧动画的概念了, 会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帧的菊花帧蛋疼~~

文本溢出展示省略号的需求经常都会用到，而对于新式的浏览器，这完全不是问题，因为css3里面已经有实现text-overflow：ellipsis，但是最新w3c文档中却移除了这个属性，即使这样，也有不少浏览器实现了这个特性。其浏览器支持情况如下：

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

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

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

Read More »

现在css3出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就css实现， 否者就用js实现。

比较明显的例子就是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”即可。

Loading图, 也就是俗称的菊花, 大部分网站都会用到, 而一般情况用的都是gif动画, 但是gif能保存的颜色太少, 导致有渐变的图导出来后有毛边, 很不美观.

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

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

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

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

Read More »

我们知道, css margin是会合并的, 有时会导致一些布局问题.

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

我们先看下面这个例子:
Read More »

周五在ubuntu上测了一下重构后的富文本, 发现依然存在一个bug: 开启了中文输入法的话, 输入框就监听不到按钮事件了.

这个问题在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 更新: Read More »