编程 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 中的 MVC 模式

Apr 11 Javascript

jQuery输入城市查看地图使用介绍

May 08 Javascript

js中方法重载如何实现？以及函数的参数问题

Aug 01 Javascript

jQuery实现气球弹出框式的侧边导航菜单效果

Sep 22 Javascript

JS实现黑色风格的网页TAB选项卡效果代码

Oct 09 Javascript

详解JavaScript对象和数组

Dec 03 Javascript

js如何获取网页所有图片

May 12 Javascript

详解angularJS自定义指令间的相互交互

Jul 05 Javascript

Bootstrap 模态框多次显示后台提交多次BUG的解决方法

Dec 26 Javascript

vue-cli 3.x 配置Axios(proxyTable)跨域代理方法

Sep 19 Javascript

详解在网页上通过JS实现文本的语音朗读

Mar 28 Javascript

vue2.x 对象劫持的原理实现

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