Rumah > Artikel > hujung hadapan web > Analisis kaedah pelaksanaan gerakan seragam dalam kemahiran javascript_javascript

Analisis kaedah pelaksanaan gerakan seragam dalam kemahiran javascript_javascript

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

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

Langkah-langkah gerakan seragam:

1. Pemasa jelas
2. Mulakan pemasa
3. Sama ada latihan selesai: a Jika latihan selesai, kosongkan pemasa b. Teruskan jika latihan tidak selesai

Syarat untuk menghentikan gerakan seragam: jarak cukup dekat Math.abs (jarak kursus - jarak sasaran) <

Tangkapan skrin kesan berjalan adalah seperti berikut:

Gerakan seragam (gerakan mudah) contoh div:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
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 = 0;
  if(obj.offsetLeft < iTarget)
  {
   iSpeed = 7;
  }
  else
  {
   iSpeed = -7;
  }
  if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
  {
   clearInterval(timer);
   obj.style.left = iTarget + 'px';
  }
  else
  {
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<span></span>
</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：Penjelasan terperinci tentang contoh penggunaan confirm() dalam kemahiran js confirmation box_javascriptArtikel seterusnya：Penjelasan terperinci tentang contoh penggunaan confirm() dalam kemahiran js confirmation box_javascript

Artikel berkaitan

Lihat lagi