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

js定时器(执行一次、重复执行)

Mar 07 Javascript

jQuery获取选中内容及设置元素属性的方法

Jul 09 Javascript

jQuery结合HTML5制作的爱心树表白动画

Feb 01 Javascript

javascript中传统事件与现代事件

Jun 23 Javascript

Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

Jun 30 Javascript

js创建对象几种方式的优缺点对比

Sep 28 Javascript

Bootstrap 表单验证formValidation 实现表单动态验证功能

May 17 Javascript

AngularJS中下拉框的基本用法示例

Oct 11 Javascript

使用validate.js实现表单数据提交前的验证方法

Sep 04 Javascript

如何通过setTimeout理解JS运行机制详解

Mar 23 Javascript

详解Vue中的scoped及穿透方法

Apr 18 Javascript

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

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

You might like

destoon首页调用求购供应信息的地区名称的方法

2014/08/21 PHP

destoon实现VIP排名一直在前面排序的方法

2014/08/21 PHP

php绘图之在图片上写中文和英文的方法

2015/01/24 PHP

Laravel用户授权系统的使用方法示例

2018/09/16 PHP

PHP连续签到功能实现方法详解

2019/12/04 PHP

js实现连个数字相加而不是拼接的方法

2014/02/23 Javascript

JS删除字符串中重复字符方法

2014/03/09 Javascript

JavaScript实现网页截图功能

2014/10/16 Javascript

jQuery事件绑定用法详解

2016/09/08 Javascript

js插件Jcrop自定义截取图片功能

2016/10/14 Javascript

ActiveX控件的使用-js实现打印超市小票功能代码详解

2017/11/22 Javascript

Vue调试神器vue-devtools安装方法

2017/12/12 Javascript

Vue-Quill-Editor富文本编辑器的使用教程

2018/09/21 Javascript

基于layui轮播图满屏是高度自适应的解决方法

2019/09/16 Javascript

Vue使用CDN引用项目组件，减少项目体积的步骤

2020/10/30 Javascript

如何利用vue实现波谱拟合详解

2020/11/05 Javascript

[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘

2015/12/11 DOTA

Python实现二维有序数组查找的方法

2016/04/27 Python

Google开源的Python格式化工具YAPF的安装和使用教程

2016/05/31 Python

python不换行之end=与逗号的意思及用途

2017/11/21 Python

Python对列表去重的多种方法(四种方法)

2017/12/05 Python

Python后台管理员管理前台会员信息的讲解

2019/01/28 Python

基于Django OneToOneField和ForeignKey的区别详解

2020/03/30 Python

PyTorch中的C++扩展实现

2020/04/02 Python

设置jupyter中DataFrame的显示限制方式

2020/04/12 Python

澳大利亚当地最大的时装生产商：Cue

2018/08/06 全球购物

会议接待欢迎词

2014/01/12 职场文书

文化宣传方案

2014/03/13 职场文书

老公爱的承诺书

2014/03/31 职场文书

感恩老师的演讲稿

2014/05/06 职场文书

建筑施工安全生产责任书

2014/07/22 职场文书

销售经理工作检讨书

2015/02/19 职场文书

银行实习推荐信

2015/03/27 职场文书

2016年教师学习教师法心得体会

2016/01/20 职场文书

2016基督教会圣诞节开幕词

2016/03/04 职场文书

动画《朋友游戏》公开佐藤友生绘制的开播纪念绘

2022/04/06 日漫