왼쪽 및 오른쪽 클릭 movement_javascript 기술을 실현하는 js 간단한 방법-JS 튜토리얼-php.cn

왼쪽 및 오른쪽 클릭 movement_javascript 기술을 실현하는 js 간단한 방법

WBOY

풀어 주다： 2016-05-16 16:05:04

원래의

1262명이 탐색했습니다.

이 기사의 예에서는 js에서 왼쪽 및 오른쪽 클릭 동작을 간단하게 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

여기서 오른쪽을 클릭하면 상자가 오른쪽으로 이동하고, 왼쪽을 클릭하면 상자가 왼쪽으로 이동하는 효과를 얻을 수 있습니다

setInterval을 사용하면 모션 효과를 얻기 위해 div가 얼마나 오래, 얼마나 멀리 움직여야 하는지 알 수 있습니다.

포인트 1: 요소의 왼쪽 거리가 목표 거리보다 작으면 양의 방향으로 이동하고, 그렇지 않으면 음의 방향으로 이동합니다

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

로그인 후 복사

포인트 2: 요소의 왼쪽 거리가 목표 거리와 같으면 타이머를 중지합니다. 그렇지 않으면 요소의 왼쪽 거리는 현재 왼쪽 거리에 속도 값을 더한 것과 같습니다.

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

로그인 후 복사

코드 업로드

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

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.