<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jsAnim.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
#mushroom{position:relative;}/*动画元素的重要属性*/
</style>
</head>
<body>
<img id="mushroom" src="E:图片ei.png" alt="" />
<div>
<button id="do1">你好</button><button id="do2">你好</button>
</div>
<script type="text/javascript">
var manager = new jsAnimManager(); //声明jsadmin管理对象
$("#do1").click(function(){
manager.registerPosition("mushroom"); //向jsadmin注册动画元素
shroom = document.getElementById("mushroom"); //声明变量获得动画元素
shroom.setPosition(-250,25); //设置动画元素的初始位置
var anim = manager.createAnimObject("mushroom"); //jsadmin创建动画
var anim1 = manager.createAnimObject("mushroom");
var anim2 = manager.createAnimObject("mushroom");
anim.add({property: Prop.position, to: new Pos(250,25),
duration: 2000, onComplete: function() {alert("HEY!")}}); //开始最终执行动画效果,详细全部效果可通过查看jsadmin源文件
<!-- anim1.add({property: Prop.position, to: new Pos(250,75), -->
<!-- duration: 2000}); -->
<!-- anim2.add({property: Prop.dimension, to: new Dim(140,20), -->
<!-- duration: 2000}); -->
})
$("#do2").click(function(){
manager.registerPosition("mushroom");
shroom = document.getElementById("mushroom");
//shroom.setPosition(-250,25);
var anim = manager.createAnimObject("mushroom");
anim.add({property: Prop.left, to: 500, duration: 2000});
anim.add({property: Prop.position, to: new Pos(250,25),
duration: 2000});
anim.add({property: Prop.wait, duration: 1000});
anim.add({property: Prop.position, to: new Pos(0,100),
duration: 2000});
anim.add({property: Prop.backgroundColor, to: new Col(00,255,133),
duration:2000});
anim.add({property: Prop.positionCircle(true), to: new Pos(0,100),
duration: 2000});
anim.add({property: Prop.position, to: new Pos(250,25),
duration: 2000});
anim.add({property: Prop.position, to: new Pos(250,100),
duration: 2000});
anim.add({property: Prop.positionSemicircle(false),
to: new Pos(250,25), duration: 2000});
})
</script>
</body>
</html>