Rumah >hujung hadapan web >tutorial js >Kaedah pelaksanaan gerakan penimbal JavaScript (2 contoh)_kemahiran javascript

Kaedah pelaksanaan gerakan penimbal JavaScript (2 contoh)_kemahiran javascript

WBOYasal: 2016-05-16 15:21:071249semak imbas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan gerakan penimbal JavaScript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Prinsip pelaksanaan: (jarak sasaran - jarak semasa) / tapak = kelajuan (semakin besar jarak, semakin kecil kelajuan, dan jarak dan kelajuan adalah berkadar songsang)

Salin kod Kod adalah seperti berikut:

(500 - oDiv.offsetLeft) / 7 = iSpeed;

Nota: : Apabila kelajuan yang dikira mengandungi perpuluhan, ia perlu dibundarkan

Salin kod Kod adalah seperti berikut:

(500 - oDiv.offsetLeft) / 7 = iSpeed ​​​​; = iSpeed>0? Math.ceil(iSpeed):Math.floor(iSpeed);

Contoh 1: Pergerakan penimbal peluncur

<!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>

Contoh 2: Bar sisi gelongsor

<!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>

Untuk lebih banyak kandungan yang berkaitan dengan kesan gerakan JavaScript, sila lihat topik khas di tapak ini: " Ringkasan kesan dan teknik gerakan JavaScript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jquery mengehadkan kotak teks kepada hanya memasukkan nombor (integer dan perpuluhan)_jqueryArtikel seterusnya：jquery mengehadkan kotak teks kepada hanya memasukkan nombor (integer dan perpuluhan)_jquery

Artikel berkaitan

Lihat lagi