资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

原创新闻 Émile：迷你的CSS animation JavaScript框架

2009-11-10 14:06 by 副主编 zly06 评论(3) 有4513人浏览
JavaScript CSS 框架

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

É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


点击查看示例：

<script src="emile.js"></script>

<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

<script>
  emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
      emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
        duration: 4000, easing: bounce
      });
    }
  });

  function bounce(pos) {
    if (pos <(1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos <(2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos <(2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
</script>

 点击查看更多详情：http://github.com/madrobby/emile

来自: ajaxian
3
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 wuxi7227 2009-11-11 12:10
用dojo的animation蛮不错的
2 楼 dayone 2009-11-11 09:10
它那个demo在ie下不支持吧
1 楼 elementstorm 2009-11-11 08:45
晕死...这个动画效果还要自己写啊

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • eter：轻量级JavaScript集合

    Éter是在和浏览器上运行JavaScript轻量级集合的集合。 用法 对于节点，并包含它 var eter = require ( 'eter' ) ; 对于浏览器，只需包含所需的模块。 您可以使用安装软件包 bower install eter --save 并包含脚本...

  • 在XML文档中引入外部DTD文件

    XML文档通过使用DOCTYPE声明语句（文档类型定义语句）来指明它所遵循的DTD文件， DOCTYPE声明语句紧跟在XML文档声明语句后面，有两种格式: 1. 2.   例如: 1. 2. "-//Sun Microsystems,Inc.//DTD Web Application2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd

  • 在Struts中资源文件的中文显示

    例如: WEB-INF/classes目录下有资源文件ApplicationResources_zh.propertiesApplicationResources_zh.properties文件的内容:error.username.required=请输入用户名!error.password.required=请输入密码! 进入dos环境,进入ApplicationResour

  • XML文件DTD路径解析

    1.XML文件声明的dtd文件路径如下 PUBLIC "-//Sun Microsystems,Inc.//DTD Web Application 2.2//EN" "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd"> 2.dtd声明解析原则： D O C T Y P E声明不仅包含常规的要害字和根元素名称，而且包含指示外部D T D源的

  • desafio-array:用JavaScript挑战数组

    Javascript数组操作Primeira solução que pensei apesar que ficou com complexidade elevada, porém foi a que satifez já que é necessario alterar um dos array enquanto ocorre o loop e checar o indice....

  • kodi.emulator.ascii：酒（SAKÉ）：适用于xbmc，xbmcgui，xbmcaddon和xbmcplugin等Kodi模块的简单模拟器

    SAKÉ：简单ASCII Kodi模拟器SAKÉ ：您最喜欢的“饮料”，用于调试和开发Kodi Python附加组件SAKÉ可帮助您调试和开发Kodi Python附加组件。 它包含一组库，这些库试图模仿相应的Kodi模块的功能： 模组目的xbmc ...

  • eelv-douai:EÉLVDouaisis网站

    埃鲁夫杜艾开发npm inpm run dev部署 ： NODE_ENV=production bin/content.sh && NODE_ENV=production node bin/authorize && NODE_ENV=production npm run sync && NODE_ENV=production npm run build && NODE_ENV=...

  • stuts.xml 配置提示警告：struts.dtd文件找不到

    警告地点： 警告信息： The file cannot be validated as the XML definition "/home/zhichaoliu/workspace/.metadata/.plugins/org.eclipse.wst.internet.cache/-1087860657.cache (没有那个文件或目录)" that is specified as.des

  • Struts中文（包括资源文件）问题解决方案

    google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//<script type="text/javascript"

  • 配置 struts2 时掉进 web.xml 的坑

    这个声明不好用 &lt;!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" &gt; 这个声明才是struts2 的声明 &lt;web-app id="struts_bla...

  • 解决Struts中ApplicationResources_properties文件不支持中文问题

    Properties Editor 可以通过以下三种方式来使用：1、通过Java WebStart2、手动安装Properties Editor的Jar包3、通过Eclipse自动安装下面，我们将使用第三种方式来安装第一步：HelpSoftware UpdatesFind and InstallSearch for new features to in

  • ex5-signets:ÉquipeJean-Luc Ho et Haoyang Chen

    ÉquipeJean-Luc Ho et Haoyang Chen

  • DiroBot:适用于AÉDIROUMDiscord服务器的Discord Bot

    迪罗宝 适用于AÉDIROUMDiscord服务器的Discord Bot 将discord.js和nodemailer模块用于node.js npm install // install in current directory node DireBot.js // start server

  • pokedex_laravel:Victor Hanszman使用Laravel框架和PHP语言开发的Pokédex

    POKÉDEXLARAVEL 该项目由Victor Hanszman使用Laravel框架和PHP语言开发的Pokédex组成。 GuzzleHttp用于连接到Pokeapi.co API。 要在本地运行应用程序，必须通过终端访问项目文件夹目录并执行以下命令： “ ...

  • todolist:待办事项列表HTML || CSS || JS

    -Étape1：对问题的定义，对问题的评价以及对对象的评价-利格河畔尤里多（Créerune todolist en ligne） __Objectif 1：程序员和Todolist功能 Écrireunetâcheavec un [输入文本] + un bouton“ ajouter” 输入...

  • EtoileFoundation:Étoilé核心框架–特征，收集协议，高阶函数，元模型，UTI等

    EtoileFoundation是所有Etoile项目的核心框架，它在OpenStep基础之上提供了许多便利方法，并为反射提供了更好的支持。 以下是一些有趣功能的摘要： 基于镜像的反射（正在进行的工作） 混合蛋白和特质 原型 双重...

Global site tag (gtag.js) - Google Analytics