zoukankan      html  css  js  c++  java
  • jsAnim简单使用教程

    • 引入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:图片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>
  • 相关阅读:
    Golang 入门~~基础知识
    Redis命令总结
    CI框架在辅助函数中使用配置文件中的变量
    前后端分离--三层
    前后端分层--两层
    JavaScript中的cookie
    JavaScript的类、对象、原型、继承、引用
    Qt编写自定义控件46-树状导航栏
    Qt编写自定义控件45-柱状标尺控件
    Qt编写自定义控件44-天气仪表盘
  • 原文地址:https://www.cnblogs.com/uxinxin/p/9075248.html
Copyright © 2011-2022 走看看