原生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 相关文章推荐
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
jquery实现全屏滚动
Dec 28 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue-iview动态新增和删除的方法
Jun 17 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
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
DOM 基本方法
2009/07/18 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
abstract是什么意思
2012/02/12 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
女大学生自我鉴定
2013/12/09 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
全运会口号
2014/06/20 职场文书
毕业实习计划书
2015/01/16 职场文书
工地食品安全责任书
2015/05/09 职场文书
光荣之路观后感
2015/06/12 职场文书