등 속 운동 의 인 스 턴 스 설명(사 이 드 바,페이드아웃)

8472 단어 등 속 운동페 이 드 아웃
javascript 에서 어떻게 요소(예 를 들 어 div)를 운동 시 킵 니까?
기본 적 인 스타일 을 설정 하려 면 div 에 포 지 셔 닝 을 해 야 합 니 다(물론 margin 의 변화 로 도 요소 가 운동 효 과 를 낼 수 있 습 니 다).

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>
기본 적 인 구조:

   <input type="button" value="   "/>
   <div id="box"></div>
우리 가 이 버튼 을 눌 렀 을 때 div 를 운동 시 켜 야 한다.사실은 div 의 left 값 을 지속 적 으로 변화 시 키 는 것 이다.그러면 div 는 운동 효 과 를 낼 것 이다.우 리 는 먼저 left 를 변화 시 킨 다음 에 그 를 지속 적 으로 변화 시 킬 것 이다.

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }
그러면 내 가 버튼 을 누 를 때마다 div 의 left 값 은 원래 의 기초 위 에 10px 를 추가 합 니 다.여기 서도 비 행 간 스타일 을 얻 는 방법 으로 left 의 값 을 얻 을 수 있 고 10px 를 더 하면 효 과 를 얻 을 수 있 습 니 다.

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}
offsetLeft 와 비 줄 스타일 left 를 가 져 오 는 값 은 어떤 차이 가 있 습 니까?
offsetLeft 는 px 단위 가 없고 left 는 px 단위 가 있 습 니 다.

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }
지금 div 는 클릭 해서 움 직 이 는 거 예요.계속 움 직 이게 할 게 요.어떻게 해요?타이머

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }
우리 가 버튼 을 누 르 면 div 는 끊임없이 왼쪽으로 운동 하 는데 어떻게 그 를 멈 추 게 합 니까?멈 춰 라,틀림없이 조건 이 필요 할 것 이다.예 를 들 어,우리 가 그 를 500 px 까지 달 려 갈 때 멈 추 게 하 는 것 이다.

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }
이렇게 하면 우 리 는 div 를 500 px 의 위치 에 멈 추 게 할 수 있 습 니 다.여기 서 만약 에 우리 가 보폭 10 을 7 또는 8 로 바 꾸 면 멈 출 수 없다 는 것 을 알 게 될 것 입 니 다.왜 일 까요?500 px 라 는 판단 조건 을 뛰 어 넘 으 니까.
0,7,14,21...280,287,294,301,...490,497,504.497 에서 504 로 500 px 를 뛰 어 넘 었 기 때문에 div 가 멈 추 지 않 습 니 다.어떻게 하 죠?판단 조건 을 수정 하면 됩 니 다.

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}
조건 을>=500 타이머 제거 와 함께 이 코드 oBox.style.left=500+'px'로 바 꾸 어 500 px 에 강제로 멈 추 게 합 니 다.그렇지 않 으 면 div 는 500 px 에 멈 추 지 않 고 504 px 입 니 다.또 하나의 문제 가 있 습 니 다.div 운동 을 하 는 과정 에서 버튼 을 계속 누 르 면 div 가 10px 를 추가 하 는 것 이 아니 라 가속 운동 을 시작 합 니 다.이 건 또 왜 일 까?이것 은 버튼 을 누 를 때마다 타 이 머 를 켰 기 때 문 입 니 다.버튼 을 누 를 때마다 타 이 머 를 켰 습 니 다.그러면 여러 개의 타 이 머 가 중첩 되 고 속도 도 중첩 되 기 때문에 div 가 속 도 를 내기 시 작 했 습 니 다.그러면 우 리 는 그 에 게 10px 의 속 도 를 유지 하 게 해 야 합 니 다.타 이 머 를 중첩 하지 말 라 는 뜻 입 니 다.더 쉽게 말 하면 타이머 가 켜 져 있 는 지 확인 하 는 것 이다.어떻게 해 야 되 지?

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}
버튼 을 누 를 때마다 이전의 타 이 머 를 제거 하면 됩 니 다.그러면 항상 타 이 머 를 켜 놓 을 수 있 습 니 다.이로써 가장 기본 적 인 등 속 운동 구조 가 완성 되 었 습 니 다.그러면 우 리 는 그 를 함수 로 포장 할 수 있 습 니 다.

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
이 함수 가 생 긴 후에 우 리 는 작은 응용 을 해 보 자.
http://www.jiathis.com/getcode
이 사 이 트 를 열 면 오른쪽 에 사 이 드 바 효과(공유)가 있 는 것 을 주의해 서 보 세 요.이런 효 과 는 사이트 에서 매우 보편적 입 니 다.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>    - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box div {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<div id="box">
  <div>   </div>
</div>
</body>
</html>
페 이 드 아웃 효과 추가:

마우스 가 올 라 가면 투명도 가 1 이 됩 니 다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>     - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
이상 의 이 등 속 운동 을 바탕 으로 하 는 실례 설명(사 이 드 바,페 이 드 아웃)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 할 수 있 고 여러분 들 이 저 희 를 많이 응원 해 주시 기 바 랍 니 다.
vue 와 TypeScript 통합 설정 최 단 튜 토리 얼(추천)
통용 되 는 등 속 운동 프레임 워 크 만 들 기(실례 설명)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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