JS div 등 속 이동 애니메이션 과 변속 이동 애니메이션 코드 인 스 턴 스

3865 단어 JSdiv등 속 애니메이션변속 애니메이션
1.등 속 이동 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  div {
   margin-top: 20px;
   width: 200px;
   height: 100px;
   background-color: green;
   position: absolute;
   left: 0;
   top: 0;
  }
 </style>
</head>
<body>
<input type="button" value="   400px" id="btn1"/>
<input type="button" value="   800px" id="btn2"/>
<div id="dv">
 <script src="common.js"></script>
 <script>
  //      div
 
  my$("btn1").onclick = function () {
   animate(my$("dv"), 400);
  };
  my$("btn2").onclick = function () {
   animate(my$("dv"), 800);
  };
 
  //    
  function animate(element, target) {
   //     
   clearInterval(element.timeId);
   element.timeId = setInterval(function () {
    //         
    var current = element.offsetLeft;
    //     
    var step = 10;
    step = target > current ? step : -step;
    current += step;
    if (Math.abs(current - target) > Math.abs(step)) {
     element.style.left = current + "px";
    } else {
     clearInterval(element.timeId);
     element.style.left = target + "px";
    }
   }, 20);
  }
 </script>
</div>
</body>
</html>
2.변속 이동 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  div {
   margin-top: 20px;
   width: 200px;
   height: 100px;
   background-color: green;
   position: absolute;
   left: 0;
   top: 0;
  }
 </style>
</head>
<body>
<input type="button" value="   400px" id="btn1"/>
<input type="button" value="   800px" id="btn2"/>
<div id="dv">
 <script src="common.js"></script>
 <script>
  //      div
 
  my$("btn1").onclick = function () {
   animate(my$("dv"), 400);
  };
  my$("btn2").onclick = function () {
   animate(my$("dv"), 800);
  };
 
  //    
  function animate(element, target) {
   //     
   clearInterval(element.timeId);
   element.timeId = setInterval(function () {
    //         
    var current = element.offsetLeft;
    //     
    var step = (target-current)/10;
    step = step>0?Math.ceil(step):Math.floor(step);
    current += step;
    element.style.left = current + "px";
    if(current==target) {
     //     
     clearInterval(element.timeId);
    }
    
   }, 20);
  }
 </script>
</div>
</body>
</html>
common.js

/**
 *         
 * @param id    id   
 * @returns {Element}  id           
 */
function my$(id) {
  return document.getElementById(id);
}
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 JS div 등 속 이동 애니메이션 과 변속 이동 애니메이션 의 상세 한 해석 과 통합 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
spring security 동적 설정 url 권한 의 2 가지 실현 방법
my batis 1 대 1,1 대 다 중 조회 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage