Heim > Artikel > Web-Frontend > So verwenden Sie JS zum Implementieren von Pufferbewegungen
So verwenden Sie JS zum Implementieren von Pufferbewegungen
- php中世界最好的语言Original
- 2018-06-01 14:19:581090Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie JS zum Implementieren von Pufferbewegungen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von JS zum Implementieren von Pufferbewegungen gelten. Hier ist ein praktischer Fall, schauen wir uns das an.
Beim Puffern muss numerisches Runden und Aufrunden verwendet werden: Math.ceil()Abrunden Math.floor()
Der Effekt der Verlangsamung der Bewegungsgeschwindigkeit, Bewegungsgeschwindigkeit = (Endposition - Aktueller Standort) / Eine Zahl
<!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>JS缓冲运动</title>
<style>
#p{
width:150px;
height:150px;
background:#0C6;
position:absolute;
left:0;
top:50px;
}
#p2{
background:#000;
height:600px;
position:absolute;
left:500px;
width:2px;
}
</style>
</head>
<script>
var speed;
var time;
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
speed = 0;
move(500);
};
btn2.onclick = function(){
speed = 0;
move(0);
};
};
function move(e){
var p = document.getElementById('p');
clearInterval(time);
time = setInterval(function(){
//改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数
e==500 ? speed = Math.ceil((e-(p.offsetLeft))/30):speed = Math.floor((e-(p.offsetLeft))/30)
if (e <= p.style.left){//达到，关闭定时器
clearInterval(time);
}
else
{
p.style.left = p.offsetLeft+speed+'px';
}
},30);
};
</script>
<body>
<input type="button" value="向右运动" id="btn" />
<input type="button" value="向左运动" id="btn2" />
<p id = "p">
</p>
<p id = "p2">
</p>
</body>
</html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie Vux in einem Vue-Projekt
Öffnen und Schließen des Menüs ohne JS
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum Implementieren von Pufferbewegungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!