javascript元素水平运动代码实例
本章节通过代码实例介绍一下如何利用原生javascript实现元素的水平运动效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body{ margin:0; padding:0; } #run{ width:100px; height:100px; background:#06c; position:absolute; border:1px solid #000; left:0; } </style> <script> window.onload = function(){ var run = document.getElementById("run"); var btn = document.getElementById("btn"); var btn1 = document.getElementById("btn1"); var speed = 2; var timer = null; btn.onclick = function(){ startrun(300); } btn1.onclick = function(){ startrun(0); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ if(run.offsetLeft <target){ speed = 2; } else{ speed = -2; } if(run.offsetLeft ==target){ clearInterval(timer); } else{ run.style.left = run.offsetLeft +speed +"px"; } },30) } } </script> </head> <body> <input id="btn" type="button" value="运动向右"> <input id="btn1" type="button" value="运动向左"> <div id="run"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function(){},文档元素完全加载完毕再去执行函数中的代码。
(2).var run = document.getElementById("run"),获取id属性值为run的元素对象。
(3).var btn = document.getElementById("btn"),获取id属性值为btn的元素对象。
(4).var btn1 = document.getElementById("btn1"),获取id属性值为btn1的元素对象。(5).var speed = 2,设置运动幅度。
(6).var timer = null,声明一个变量并赋初值为null,用来存储定时器函数的标识。
(7). btn.onclick = function(){
startrun(300);
},点击按钮可以使元素向右运动。
(8).btn1.onclick = function(){
startrun(0);
},点击按钮可以使元素向左运动。
(9).function startrun(target){},此方法实现了运动效果,参数规定运动的目标坐标值。
(10).clearInterval(timer),停止上一个定时器函数的执行,否则可能会出现多个定时器函数重合执行的情况。
(11).timer = setInterval(function(){
if(run.offsetLeft <target){
speed = 2;
}
else{
speed = -2;
}
if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}
},30),首先判断运算运动的方位,设置speed的值。
如果到达指定位置,就停止定时器函数的执行,否则设置offset属性值。
二.相关阅读:
(1).clearInterval()可以参阅window.clearInterval()一章节。
(2).setInterval()方法可以参阅setInterval()一章节。
(3).offsetLeft()方法可以参阅js offsetLeft一章节。