关注我们

Javascript - 动画效果

JavaScript提供了以下两个在动画程序中经常使用的函数。

setTimeout(function，duration) - 此函数从现在开始持续时间毫秒后调用函数。
setInterval(function，duration) - 此函数每隔 duration 毫秒调用一次 function 。
clearTimeout(setTimeout_variable) - 此函数调用清除由setTimeout()函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性，包括其在屏幕上的位置，您可以设置对象的 top 和left属性以将其放置在屏幕上的任何位置。这是它的语法。

//Set distance from left edge of the screen.
object.style.left=distance in pixels or points; 
or
//Set distance from top edge of the screen.
object.style.top=distance in pixels or points;

手动动画

让无涯教程使用DOM对象属性和JavaScript函数来实现一个简单的动画，如下所示。以下列表包含不同的DOM方法。

正在使用JavaScript函数 getElementById()获取DOM对象，然后将其分配给全局变量 imgObj 。
定义了一个初始化函数 init()来初始化 imgObj ，在其中设置了它的 position 和 left 属性。
在窗口加载时正在调用初始化函数。
最后，调用 moveRight()函数将左侧距离增加10个像素。您也可以将其设置为负值，以将其移至左侧。

请尝试以下示例。

复制代码

<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) + 10 + 'px';
            }
            
            window.onload=init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>      
   </body>
</html>

运行上面代码输出

自动动画

在上面的示例中，看到了每次单击图像如何向右移动。可以使用JavaScript函数 setTimeout()来自动执行此过程，如下所示:

在这里添加了更多方法。所以看看这里有什么新东西-

moveRight()函数正在调用 setTimeout()函数来设置 imgObj 的位置。
添加了新函数 stop()，以清除由 setTimeout()函数设置的计时器，并将对象设置在其初始位置。

请尝试以下示例代码。

复制代码

<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() {
               imgObj.style.left=parseInt(imgObj.style.left) + 10 + 'px';
               animate=setTimeout(moveRight,20);    //call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left='0px'; 
            }
            
            window.onload=init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick="moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>      
   </body>
</html>

运行上面代码输出

鼠标事件

这是一个显示鼠标事件的图像滚动的简单示例。

复制代码

<html>
   
   <head>
      <title>鼠标事件进行翻转</title>
      
      <script type="text/javascript">
         <!--
            if(document.images) {
               var image1=new Image();     //Preload an image
               image1.src="/images/html.gif";
               var image2=new Image();     //Preload second image
               image2.src="/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href="#" onMouseOver="document.myImage.src=image2.src;"
         onMouseOut="document.myImage.src=image1.src;">
         <img name="myImage" src="/images/html.gif" />
      </a>
   </body>
</html>

运行上面代码输出

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

李智慧 · 高并发架构实战课 -〔李智慧〕

LangChain 实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)