引入jsAnim.js 定義動畫元素 元素需要有position:relative;或者position:absolute;屬性 添加js <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title ...
- 引入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>
