CSS3/JS/Flash版动画角标的实现与比较

以动画角标的实现为例，探讨各种技术方案的优缺点。blog: http://www.cnblogs.com/kaiye/archive/2012/04/06/3039043.html

Transcript

1. CSS3/JS/Flash版
   动画角标的实现与比较
   @kaiye
   

   View Slide

2. • 2008 - 2010 前端开发@支付宝
   • 2010 - 至今 网页重构@ISUX
   

   View Slide

3. CSS3 Properties
   

   View Slide

4. CSS3 Animation
   http://css-tricks.com/examples/CSS3Clock/
   

   View Slide

5. CSS3 Animation
   http://designlovr.com/examples/
   dynamic_stack_of_index_cards/
   

   View Slide

6. CSS3 Animation
   • http://www.paipai.com/caizuanjie.shtml
   • http://www.paipai.com/fangjia.shtml
   • chrome://flags/
   enable Composited render layer borders （合成渲染层边框）
   

   View Slide

7. CSS3动画角标
   {
   animation:
   ;
   }
   @keyframes {
   
   0% {}
   
   100% {}
   }
   

   View Slide

8. 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
   

   View Slide

9. JS动画角标
   http://yekai.net/demo/animation-corner-3.html
   

   View Slide

10. Flash动画角标
    • Flash的参数设置
    • getURL()
    http://yekai.net/demo/animation-corner-4.html
    

    View Slide

11. 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
    

    View Slide

12. Flash动画角标
    • getURL()
    

    View Slide

13. 动画角标方案比较
    方案 实现成本 复用成本 兼容性
    CSS 低 低 IE6/7
    CSS3 中 中 Safari/Chrome/
    Firefox/IE10
    JS 高 低 !noscript
    Flash 高 低 Flash Player/!iOS
    

    View Slide

14. View Slide

15. while(兼容性 && 实现成本){
    
    do();
    }
    

    View Slide

16. while(兼容性 && 实现成本){
    
    do();
    }
    var 兼容性 = this.兼容性 ;
    

    View Slide

17. IE && !IE
    • HTML5/CSS3
    • http://sofish.de/1819
    • http://pb.paipaioa.com
    • IE
    • CSS Attributes
    • Introduction to Dynamic HTML
    • ActiveX
    

    View Slide

18. Reference
    • http://findmebyip.com/litmus/
    • http://www.qianduan.net/47-amazing-css3-
    animation.html
    • http://www.5uflash.com/flashjiaocheng/
    Flashyuweb/3173.html
    

    View Slide

19. 谢谢
    

    View Slide