用JavaScript实现动画效果

作者:计算机教程
  • 引入jsAnim.js
  • 定义动画元素 元素需要有position:relative;或者position:absolute;属性
  • 添加js
  • <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://www.auto-prest.com/uploads/allimg/190512/1132123093-0.jpg"></script>
        <style type="text/css">
        #mushroom{position:relative;}/*动画元素的重要属性*/
        </style>
    </head>
    <body>
    <img id="mushroom" src="E:图片bei.png" alt="图片 1" />
    <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});  
        })
    

本文来自学习JavaScript DOM编程艺术一书时的笔记和总结等。

        </script>
    </body>
    </html>

 

1、关于元素style对象的position属性

用于设置元素在网页上的位置,position属性的取值有以下4种:

  • static (默认值)
  • fixed
  • relative
  • absolute

如果把某个元素的position属性设置为absolute,就可以把它摆放到容纳它的“容器”的任何位置。这个“容器”要么是文档本身,要么是一个有着fixed或absolute属性的父元素。

例如,如果把position属性值是absolute的元素A放入一个position属性值是relative的元素B,B就成为A的容器元素。而A将在B的显示区域里按absolute方式进行摆放。

2、关于js的setTimeout函数和clearTimeout(variable)函数

setTimeout 用于让某个函数在经过一段预定的时间之后才开始执行。

语法格式为:setTimeout("function",interval)

clearTimeout(variable) 用于取消“等待执行”队列里的某个函数。

这个函数需要一个参数——保存着某个setTimeout函数调用返回值的变量。

3、关于js的parseInt、parseFloat函数

parseInt(string) 用于把字符串里的数值信息提取出来,如果把一个以数字开头的字符串传递给这个函数,它将返回一个数值。

例如,

parseInt("39 steps");

这个函数的调用将返回整数:39

parseFloat(string)用于提取带小数点的数值(也就是浮点数)。

本文由nba买球发布,转载请注明来源

关键词: