原生javascript实现匀速运动动画效果


Posted in Javascript onFebruary 26, 2016

本文向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码:

<html> 
<head> 
<meta charset="gb2312"> 
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
 width:50px;
 height:50px;
 background-color:green;
 position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
 var mydiv=document.getElementById("mydiv");
 var start=document.getElementById("start");
 var stopmove=document.getElementById("stopmove");
 var x=0;
 var flag;
 function move()
 {
  x=x+1;
  mydiv.style.left=x+"px";
 }
 start.onclick=function()
 {
  clearInterval(flag);
  flag=setInterval(move,20);
 }
 stopmove.onclick=function()
 {
  clearInterval(flag);
 }
 
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>

效果图:

原生javascript实现匀速运动动画效果

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
动态加载jquery库的方法
Feb 12 Javascript
深入探讨前端框架react
Dec 09 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 #Javascript
JavaScript代码生成PDF文件的方法
Feb 26 #Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 #Javascript
自动完成的搜索框javascript实现
Feb 26 #Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 #Javascript
js去字符串前后空格的实现方法
Feb 26 #Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP实现递归无限级分类
2015/10/22 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP递归的三种常用方式
2019/02/28 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
前端微信支付js代码
2016/07/25 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python对象的属性访问过程详解
2020/03/05 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
几个MySql的面试题
2013/04/22 面试题
仓库主管的岗位职责
2013/12/04 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
python opencv通过按键采集图片源码
2021/05/20 Python