话说上回说到使用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 »