Heim > Artikel > Web-Frontend > So implementieren Sie Pufferbewegungen in js (Codebeispiel)
So implementieren Sie Pufferbewegungen in js (Codebeispiel)
- 不言Original
- 2018-08-31 10:25:001214Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Implementierung von Pufferbewegungen in js (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.
Eigenschaften der Pufferbewegung
Verlangsamt sich allmählich und stoppt schließlich
Je weiter die Entfernung, desto höher die Geschwindigkeit
Geschwindigkeit wird durch Distanz bestimmt
Geschwindigkeit = (Sollwert-Istwert)/Skalierungsfaktor
Große Distanz, tolle Geschwindigkeit.
Der Abstand ist gering und die Geschwindigkeit ist gering.
Geschwindigkeit ist direkt proportional zur Entfernung.
Die Geschwindigkeit muss während der Pufferbewegung gerundet werden. Wenn die Geschwindigkeit 0,9 beträgt, wird sie ohne Rundung direkt zu 0. Wenn die Geschwindigkeit größer als 0 ist, sollte sie aufgerundet werden abgerundet werden.
Als nächstes führen wir eine Pufferbewegung aus, damit sich ein Div von 0 auf 300 bewegt, und eine Pufferbewegung, damit sich ein Div von 600 auf 300 bewegt.
Code zum Implementieren der Pufferbewegung
<!DOCTYPE html>
<html>
<head>
<title>缓冲运动</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
/* left: 0; */
left: 600px;
top: 50px;
}
#div2{
/* 300位置的参考线 */
width: 1px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
background: #000;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
startMove();
}
}
function startMove(){
var oDiv=document.getElementById("div1");
setInterval(function(){
var speed=(300-oDiv.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
oDiv.style.left=oDiv.offsetLeft+speed+"px";
},30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>Verwandte Empfehlungen:
So verwenden Sie die Kapselungsfunktion des JS-Bewegungspuffereffekts
JS-Implementierung von Multi-Object-Buffer-Motion-Beispielcode_Javascript-Fähigkeiten
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Pufferbewegungen in js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!