Das Beispiel in diesem Artikel beschreibt, wie man Links- und Rechtsklickbewegungen einfach in js implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Hier können Sie den Effekt erzielen, dass Sie nach rechts klicken und das Feld nach rechts verschieben oder nach links klicken und das Feld nach links verschieben
Sie können setInterval verwenden, um zu erkennen, wie lange und wie weit sich das Div bewegen sollte, um den Bewegungseffekt zu erzielen.
Punkt 1: Wenn der linke Abstand des Elements kleiner als der Zielabstand ist, bewegt es sich in eine positive Richtung, andernfalls bewegt es sich in eine negative Richtung
if(run.offsetLeft <target){
speed = 2;
}else{
speed = -2;
}Punkt 2: Wenn der linke Abstand des Elements gleich dem Zielabstand ist, stoppen Sie den Timer. Andernfalls entspricht der linke Abstand des Elements dem aktuellen linken Abstand plus dem Geschwindigkeitswert.
if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}Laden Sie den Code hoch
<!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>Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
