原生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 相关文章推荐
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
详解vue渲染函数render的使用
Dec 12 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
vant中的toast层级改变操作
Nov 04 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
微信小程序 标签传入数据
2017/05/08 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Python制作Windows系统服务
2017/03/25 Python
浅谈Django的缓存机制
2018/08/23 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
职称自我鉴定
2013/10/15 职场文书
安全生产专项整治方案
2014/05/06 职场文书
音乐学专业求职信
2014/07/22 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
感恩教育观后感
2015/06/17 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
幼儿园教学反思范文
2016/03/02 职场文书