编程 Javascript

用JavaScript实现动画效果的方法

Posted in Javascript onJuly 20, 2013

其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家
演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。

这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。

<html>

<head>

<title>JavaScript Motion Sample</title>

<script language="JavaScript">

var movingID = null;

var scrolling = false;

function startMove()

{

 var left = eval(div1.style.left.replace("px", ""));

 if (left < document.body.scrollWidth - 150)

  div1.style.left = left + 1;
 
else
 
 div1.style.left = 10;

 movingID = setTimeout("startMove()", 10);

}

function stopMove()

{

 clearTimeout(movingID);

}

</script>
</head>

<body>

<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">

 <table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">

  <tr>

   <td>I can moving...</td>

  </tr>

 </table>

</div>

<br><br>

<input type="button" value="开始移动" onClick="startMove()">

<input type="button" value="停止移动" onClick="stopMove()">

　</body>

</html>

这里主要使用了一个叫setTimeout(function, interval)函数，这个函数的参数格式为：

第一个参数“function”为超时后调用的函数名，第二个参数“interval”为超时值，以微秒为单位。

注意一点是如果要停止这个计时器，必须保存调用这个setTimeout()函数后的返回值，通过clearTimeout(id)函数来取消计时器。

用JavaScript实现动画效果的方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JavaScript事件串连执行多个处理过程的方法

Mar 09 Javascript

Javascript 函数中的参数使用分析

Mar 27 Javascript

JQury slideToggle闪烁问题及解决办法

Jul 05 Javascript

JavaScript插件化开发教程（四）

Jan 27 Javascript

JS动态添加Table的TR，TD实现方法

Jan 28 Javascript

javaScript的函数对象的声明详解

Feb 06 Javascript

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

Jun 12 Javascript

Ionic默认的Tabs模板使用实例

Aug 29 Javascript

详解Webpack实战之构建 Electron 应用

Dec 25 Javascript

jQuery实现的点击标题文字切换字体效果示例【测试可用】

Apr 26 jQuery

VUE 组件转换为微信小程序组件的方法

Nov 06 Javascript

JS判断数组四种实现方法详解

Jun 29 Javascript

JavaScript实现页面实时显示当前时间的简单实例

Jul 20 #Javascript

js动态创建表格,删除行列的小例子

Jul 20 #Javascript

JavaScript中setAttribute用法介绍

Jul 20 #Javascript

jquery动态添加删除div 具体实现

Jul 20 #Javascript

JavaScript将相对地址转换为绝对地址示例代码

Jul 19 #Javascript

鼠标焦点离开文本框时验证的js代码

Jul 19 #Javascript

jquery的flexigrid无法显示数据提示获取到数据

Jul 19 #Javascript