JavaScript(JS) 可以创建一个复杂的动画效果,例如,烟花、淡入淡出效果、物体运动等,JavaScript 可用于根据由逻辑方程或函数确定的某种模式在页面周围移动多个 DOM 元素,本文主要介绍JavaScript(JS) 实现动画(Animation)效果。

1、常用的函数

在动画程序中经常使用的函数有setTimeout( function, duration)setInterval(function, duration)clearTimeout(setTimeout_variable)

setTimeout( function, duration):这个函数从现在开始duration毫秒后调用function函数。就是指定时间后调用执行函数。

setInterval(function, duration):这个函数在每duration毫秒后调用function函数。就是定时调用执行函数。

clearTimeout(setTimeout_variable):这个函数取消由setTimeout()方法执行的函数调用。setTimeout_variablesetTimeout()的返回值。

2、设置DOM元素位置

JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。可以设置一个对象的topleft属性来改变元素在屏幕的位置。

例如,

// 设置到屏幕左边缘的距离。
object.style.left ="11px";//以像素或点为单位的距离
//或者
// 设置到屏幕上边缘的距离。
object.style.top = "22px";//以像素或点为单位的距离

3、点击按扭实现移动效果

通过点击按钮执行事件函数,将left左边距离增加15px,从而实现图片元素向右移动。

例如,

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
            var imgObj = null;
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 15 + 'px';
            }
            window.onload = init;
      </script>
   </head>
   <body>   
      <form>
         <img id = "myImage" src = "/images/cjavapy.gif" />
         <p>点击下面的按钮,向右移动图片</p>
         <input type = "button" value = "移动" onclick = "moveRight();" />
      </form>      
   </body>
</html>

4、定时实现移动效果

通过setTimeout()实现定时执行,将left左边距增加10px,从而实现图片元素自动向右移动。

例如,

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
            var imgObj = null;
            var animate ;
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               //还可以考虑增加left的值判断,超出可视区域,进行left值的重置
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,50);    // 每50毫秒调用执行moveRight一次
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            window.onload = init;
      </script>
   </head>
   <body>   
      <form>
         <img id = "myImage" src = "/images/cjavapy.gif" />
         <p>点击下面的按钮来开始动画</p>
         <input type = "button" value = "开始" onclick = "moveRight();" />
         <input type = "button" value = "重置" onclick = "stop();" />
      </form>      
   </body>
</html>

4、通过鼠标移动事件更改图片地址

通过onMouseOveronMouseOut事件,实现鼠标滑过改变图片地址。

例如,

<html>
   <head>
      <title>鼠标滚动事件</title>
      <script type = "text/javascript">
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/cjavapy.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
      </script>
   </head>
   <body>
      <p>将鼠标移到图像上查看结果</p>
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/cjavapy.gif" />
      </a>
   </body>
</html>