- 引入jsAnim.js
- 定义动画元素 元素需要有position:relative;或者position:absolute;属性
- 添加js
-
<!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:图片bei.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>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
