脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现匀速运动

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

 更新时间：2016年02月26日 14:13:24   投稿：lijiao  
这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文向大家介绍一个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原始值和对象引用的方法,实例分析了javascript原始值和对象引用的功能、定义与相关技巧,需要的朋友可以参考下
    2015-04-04
  • JavaScript判断DOM何时加载完毕的技巧

    JavaScript判断DOM何时加载完毕的技巧

    处理HTML DOM文档存在一个难题是，JavaScript可以在DOM完全加载之前执行，这会给你的代码引发不少的潜在问题;针对这个问题，本文给予适当的解决方法，仅供参考
    2012-11-11
  • JScript内置对象Array中元素的删除方法

    JScript内置对象Array中元素的删除方法

    JScript内置对象Array中元素的删除方法...
    2007-03-03
  • ES6的新特性概览

    ES6的新特性概览

    Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前，他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为，ES6的新特性将极大地改变JavaScript的编写方式
    2016-03-03
  • JS烟花背景效果实现方法

    JS烟花背景效果实现方法

    这篇文章主要介绍了JS烟花背景效果实现方法,实例分析了javascript操作dom元素实现烟花特效的技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript WebGL 图片透明处理的方式

    JavaScript WebGL 图片透明处理的方式

    WebGL 透明处理方式之一是使用 α 混合，这篇文章主要介绍了JavaScript WebGL 图片透明处理方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-01-01
  • JavaScript防止表单重复提交的方法

    JavaScript防止表单重复提交的方法

    在web开发中，防止表单的重复提交是一个非常重要的环节。重复提交会导致数据混乱，甚至可能导致系统崩溃，今天我们将带领大家从小白级别到大神级别的程序员，一起来学习如何在实际项目中避免表单的重复提交
    2023-04-04
  • js实现图片放大并跟随鼠标移动特效

    js实现图片放大并跟随鼠标移动特效

    这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • js window.onload 加载多个函数的方法

    js window.onload 加载多个函数的方法

    平时做项目 经常需要使用window.onload，但window.onload 不能同时加载多个函数。
    2009-11-11
  • javaScript 动态访问JSon元素示例代码

    javaScript 动态访问JSon元素示例代码

    访问JSon元素的方法有很多，在搜的时候会找到很多，本文使用javascript来动态访问json元素，感兴趣的朋友可以练练手哦
    2013-08-08

最新评论