jsAnim简单使用教程

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

新老客户大回馈,云服务器低至5折

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

     

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:react-redux源码解析

下一篇:选择排序和插入排序--学习笔记