js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kanan-tutorial js-php.cn

js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kanan

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2016-05-16 16:05:04

asal

1345 orang telah melayarinya

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;
}

Salin selepas log masuk

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";
}

Salin selepas log masuk

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>

Salin selepas log masuk

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