Javascript - 动画效果

首页 / JavaScript入门教程 / 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()函数设置的计时器,并将对象设置在其初始位置。

请尝试以下示例代码。

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-animation.html

来源:LearnFk无涯教程网

<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>

运行上面代码输出

无涯教程网

这一章《Javascript - 动画效果》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

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

相关推荐

朱赟的技术管理课 -〔朱赟 - 〕

Swift核心技术与实战 -〔张杰 - 〕

即时消息技术剖析与实战 -〔袁武林 - 〕

网络排查案例课 -〔杨胜辉 - 〕

如何在按钮内获取文本或运算符并将其设置在输入字段中

如何对 CSS Select 器进行分组

js.p5 表对象:使用字符串访问行,类似于列标题

Javascript D3 嵌套 lambda 函数混淆

React Router - 从不直接渲染

如何在 vue js 中使用内联声明的变量?

视频推荐

JavaScript - 09-数组新增元素 更多视频教程 »