您的位置：首页 → 精文荟萃 → DIY天地 → 迷你的CSS animation JavaScript框架

迷你的CSS animation JavaScript框架

时间：2009/11/11 10:40:00来源：本站整理作者：我要评论(0)

Émile是一个独立的CSS animation JavaScript 小框架。

• 不需要JavaScript框架
• 完整的CSS animation属性
• 简单易用
• 代码少于50行

针对的平台：

• Microsoft Internet Explorer for Windows, version 6.0 and higher
• Mozilla Firefox 1.5 and higher
• Apple Safari 2.0.4 and higher
• Opera 9.25 and higher
• Chrome 1.0 and higher

点击查看示例：

Html代码

1. <script src="emile.js"></script>  
2.   
3. <div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>  
4. <div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>  
5.   
6. <script>  
7.   emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {   
8.     duration: 500,   
9.     after: function(){   
10.       emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {   
11.         duration: 4000, easing: bounce   
12.       });   
13.     }   
14.   });   
15.   
16.   function bounce(pos) {   
17.     if (pos <(1/2.75)) {   
18.         return (7.5625*pos*pos);   
19.     } else if (pos <(2/2.75)) {   
20.         return (7.5625*(pos-=(1.5/2.75))*pos + .75);   
21.     } else if (pos <(2.5/2.75)) {   
22.         return (7.5625*(pos-=(2.25/2.75))*pos + .9375);   
23.     } else {   
24.         return (7.5625*(pos-=(2.625/2.75))*pos + .984375);   
25.     }   
26.   }   
27. </script>  

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议

文章评论

查看所有0条评论>>

发表评论

我来说两句...

提交评论