以动画角标的实现为例,探讨各种技术方案的优缺点。blog: http://www.cnblogs.com/kaiye/archive/2012/04/06/3039043.html
CSS3/JS/Flash版动画角标的实现与比较@kaiye
View Slide
• 2008 - 2010 前端开发@支付宝• 2010 - 至今 网页重构@ISUX
CSS3 Properties
CSS3 Animationhttp://css-tricks.com/examples/CSS3Clock/
CSS3 Animationhttp://designlovr.com/examples/dynamic_stack_of_index_cards/
CSS3 Animation• http://www.paipai.com/caizuanjie.shtml• http://www.paipai.com/fangjia.shtml• chrome://flags/enable Composited render layer borders (合成渲染层边框)
CSS3动画角标{animation: ;}@keyframes { 0% {} 100% {}}
CSS3动画角标.corner-ad-1:hover{animation: cornerad 0.3s step-start;}@keyframes cornerad{ 0% {background-position: right 0;} 33%{background-position: right -36px;} 67%{background-position: right -72px;} 100% {background-position: right -108px;}}http://yekai.net/demo/animation-corner-2.html
JS动画角标http://yekai.net/demo/animation-corner-3.html
Flash动画角标• Flash的参数设置• getURL()http://yekai.net/demo/animation-corner-4.html
Flash动画角标• Flash的参数设置allowscriptaccess="always" quality="high" width="120" height="120"FlashVars="url=http://t.qq.com/weiweixiao&pic=http://t0.qlogo.cn/mbloghead/ce1dbda08969ddd2a5ea/120&callback=closeCornerAd" >若变量值含有&符号,需转义为%26
Flash动画角标• getURL()
动画角标方案比较方案 实现成本 复用成本 兼容性CSS 低 低 IE6/7CSS3 中 中 Safari/Chrome/Firefox/IE10JS 高 低 !noscriptFlash 高 低 Flash Player/!iOS
while(兼容性 && 实现成本){ do();}
while(兼容性 && 实现成本){ do();}var 兼容性 = this.兼容性 ;
IE && !IE• HTML5/CSS3• http://sofish.de/1819• http://pb.paipaioa.com• IE• CSS Attributes• Introduction to Dynamic HTML• ActiveX
Reference• http://findmebyip.com/litmus/• http://www.qianduan.net/47-amazing-css3-animation.html• http://www.5uflash.com/flashjiaocheng/Flashyuweb/3173.html
谢谢