用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 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
jquery插件格式实例分析
Jun 16 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
详解CocosCreator消息分发机制
Apr 16 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
咖啡常见的种类
2021/03/03 新手入门
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
优秀党员获奖感言
2014/02/18 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
基督教婚礼主持词
2014/03/14 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python