suchen

Heim >Web-Frontend >js-Tutorial >Implementierungsmethode für JavaScript-Pufferbewegungen (2 Beispiele)_Javascript-Kenntnisse

Implementierungsmethode für JavaScript-Pufferbewegungen (2 Beispiele)_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:21:071247Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode der JavaScript-Pufferbewegung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Umsetzungsprinzip: (Zielentfernung - aktuelle Entfernung) / Basis = Geschwindigkeit (je größer die Entfernung, desto kleiner die Geschwindigkeit, und Entfernung und Geschwindigkeit sind umgekehrt proportional)

Code kopieren Der Code lautet wie folgt:
(500 - oDiv.offsetLeft) / 7 = iSpeed;

Hinweis: : Wenn die berechnete Geschwindigkeit Dezimalstellen enthält, muss sie gerundet werden

Code kopieren Der Code lautet wie folgt:
(500 - oDiv.offsetLeft) / 7 = iSpeed ​​​​; = iSpeed>0? Math.ceil(iSpeed):Math.floor(iSpeed);

Beispiel 1: Schieberpufferbewegung

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetLeft)/8;
  iSpeed = iSpeed>0&#63;Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iTarget==obj.offsetLeft){
   clearInterval(timer);
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>
<span></span>
</body>
</html>

Beispiel 2: Seitenleiste verschiebbar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏滑动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<script>
window.onload = window.onscroll = function()
{
 var oDiv = document.getElementById('div1');
 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var clientHeight = document.documentElement.clientHeight;
 var iH = (clientHeight - oDiv.offsetHeight)/2 + iScrollTop;
 //oDiv.style.top = iH + 'px';
 startMove(oDiv, parseInt(iH));
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetTop) / 8;
  iSpeed = iSpeed>0&#63;Math.ceil(iSpeed):Math.floor(iSpeed);
  if(obj.offsetTop == iTarget){
   clearInterval(timer);
  }else{
   obj.style.top = obj.offsetTop + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

Weitere Inhalte zu JavaScript-Bewegungseffekten finden Sie im Sonderthema auf dieser Website: „Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen (Ganzzahlen und Dezimalzahlen)_jqueryNächster Artikel：jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen (Ganzzahlen und Dezimalzahlen)_jquery

In Verbindung stehende Artikel

Mehr sehen