用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插件Tabs实现过程
Jul 06 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 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
php下保存远程图片到本地的办法
2010/08/08 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
简单的Python调度器Schedule详解
2019/08/30 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
应届生服务员求职信
2013/10/31 职场文书
挂职自我鉴定
2014/02/26 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
大学生实训报告总结
2014/11/05 职场文书
营销计划书范文
2015/01/17 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
python 模块重载的五种方法
2021/04/24 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP