简单的方式实现动画效果

最新推荐文章于 2024-03-16 21:29:52 发布

落伍者

最新推荐文章于 2024-03-16 21:29:52 发布

阅读量1.7k

点赞数

分类专栏：网络文章标签： border xml 脚本 .net html 语言

本文链接：https://blog.csdn.net/ljc_zy/article/details/4274902

版权

13 篇文章 0 订阅

订阅专栏

今天偶尔看到t:ANIMATE 的用法，可以动态修改一个对象的某个属性，实现动画的效果，觉得比较有意思，写了一个小东西放上来，抛砖引玉。具体内容首发在http://webtrados.008.net。

运用t:ANIMATE标记可以将一个普通对象动画化。

下面看一个例子

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">

<HEAD>

  <TITLE>t:ANIMATE Demo</TITLE>

  <?IMPORT namespace="t" implementation="#default#time2">

</HEAD>

<BODY>

<DIV ID="oDIV" STYLE="position:absolute; top:100px; left:50px; width:100px;

    height:50px; border:solid black 1px; text-align:center;">Moving DIV!</DIV>

<t:ANIMATE targetElement="oDIV" attributeName="left" to="200" dur="5"

    fill="hold"/>

</BODY>

</HTML>

其中：前缀t是说明xml语言的namespace，必须定义xml的命名空间为”urn:schemas-microsoft-com:time”，然后加载标记定义：<?IMPORT namespace="t" implementation="#default#time2">。

<t:ANIMATE targetElement="oDIV" attributeName="left" to="200" dur="5"

fill="hold"/>

意思为：动态修改oDIV对象的left属性值在5秒钟内从初始值逐渐修改为200.

这段代码的运行效果为，一个100px宽50px高的方框水平移动了100px。这样不通过脚本，我们也可以实现动画效果。

关注

专栏目录