cari

Rumah  >  Artikel  >  hujung hadapan web  >  js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kanan

js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kanan

WBOY
WBOYasal
2016-05-16 16:05:041265semak imbas

Contoh dalam artikel ini menerangkan cara hanya melaksanakan pergerakan klik kiri dan kanan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Di sini anda boleh mencapai kesan klik ke kanan dan kotak bergerak ke kanan, klik ke kiri dan kotak bergerak ke kiri

Anda boleh menggunakan setInterval untuk menyedari berapa lama dan sejauh mana div harus bergerak untuk mencapai kesan gerakan.

Mata 1: Jika jarak kiri unsur kurang daripada jarak sasaran, ia bergerak ke arah positif, jika tidak, ia bergerak ke arah negatif

if(run.offsetLeft <target){
speed = 2;
}else{
speed = -2;
}

Titik 2: Jika jarak kiri elemen adalah sama dengan jarak sasaran, hentikan pemasa Jika tidak, jarak kiri elemen adalah sama dengan jarak kiri semasa ditambah dengan nilai kelajuan. 

if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}

Muat naik kod

<!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>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
left:0;}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var btn1 = document.getElementById("btn1");
 var speed = 2;
 var timer = null;
 btn.onclick = function(){
  startrun(300);
 }
 btn1.onclick = function(){
  startrun(0);
 }
 function startrun(target){
   clearInterval(timer);
  timer = setInterval(function(){
   if(run.offsetLeft <target){
    speed = 2;
   }else{
    speed = -2;
   }
   if(run.offsetLeft ==target){
    clearInterval(timer);
   }
   else{
    run.style.left = run.offsetLeft +speed +"px";
   }
  },30)
 }
}
</script>
</head>
<body>
<input id="btn" type="button" value="运动向右">
<input id="btn1" type="button" value="运动向左">
<div id="run"></div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

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：Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript_javascriptArtikel seterusnya：Contoh kesan seretan tetikus mudah menggunakan kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi