JavaScript动画效果简单实例

使用jQuery实现动画效果要比原生JavaScript要简单的多。

因为效果都已经封装好了，一个函数调用就实现了。

本章节就介绍一个使用原生JavaScript实现的简单动画例子。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>javascript实现的简单动画-51前端</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动画效果简单实例

下载全部收藏

183 244

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册