本文實例講述了js簡單實現點擊左右運動的方法。分享給大家供大家參考。具體分析如下：
這里可實現點擊向右，方塊向右移動，點擊向左，方塊向左移動的效果
可以用setInterval來實現過多長時間，div移動多長的距離來實現運動效果。
要點一：如果元素的左邊距離小于目標距離，則是正向移動，否則是負向移動
if(run.offsetLeft <target){speed = 2;}else{speed = -2;}要點二：如果元素的左邊距離等于目標距離，停止定時器，否則，元素的左邊距離等于現在的左邊距離加上速度值。
if(run.offsetLeft ==target){clearInterval(timer);}else{run.style.left = run.offsetLeft +speed +"px";}上代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><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>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
