编程 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 相关文章推荐

不用ajax实现点击文字即可编辑的方法

Dec 16 Javascript

执行iframe中的javascript方法

Oct 07 Javascript

js表单提交和submit提交的区别实例分析

Dec 10 Javascript

基于JavaScript实现手机短信按钮倒计时(超简单)

Dec 30 Javascript

jQuery实现多级联动下拉列表查询框

Jan 18 Javascript

JS判断是否长按某一键的方法

Mar 02 Javascript

微信小程序联网请求的轮播图

Jul 07 Javascript

仿京东快报向上滚动的实例

Dec 13 Javascript

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

Jan 09 Javascript

Vue中多元素过渡特效的解决方案

Feb 05 Javascript

ant design中upload组件上传大文件,显示进度条进度的实例

Oct 29 Javascript

微信小程序抽奖组件的使用步骤

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