原生javascript实现的一个简单动画效果
本文章向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <head> <title>javascript实现的简单动画</title> <styletype="text/css"> #mydiv { width:50px; height:50px; background-color:green; position:absolute; } </style> <scripttype="text/javascript"> window.onload=function() { varmydiv=document.getElementById("mydiv"); varstart=document.getElementById("start"); varstopmove=document.getElementById("stopmove"); varx=0; varflag; functionmove() { x=x+1; mydiv.style.left=x+"px"; } start.onclick=function() { clearInterval(flag); flag=setInterval(move,20); } stopmove.onclick=function() { clearInterval(flag); } } </script> <body> <inputtype="button"id="start"value="开始运动"/> <inputtype="button"id="stopmove"value="停止运动"/> <divid="mydiv"></div> </body> </html>
代码解释:
1.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
2.varmydiv=document.getElementById("mydiv"),获取id属性值为mydiv的元素。
3.varstart=document.getElementById("start"),获取id属性hi为start的元素。
4.varstopmove=document.getElementById("stopmove"),获取id属性值为stopmove的元素。
5.mydiv.style.left=x+"px",设置div的left属性值。
6.start.onclick=function(){},为start元素注册onclick事件处理函数。
7.clearInterval(flag),停止定时器函数,一方多次单击开始按钮造成叠加效果。
8.flag=setInterval(move,20),开始运动。
以上这篇原生javascript实现的一个简单动画效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。