jsAnim简单使用教程

2018-06-24 02:08:49来源：未知阅读 ()

引入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>