사이드바 공유 효과를 달성하기 위한 JavaScript 균일 모션(코드)-JS 튜토리얼-php.cn

사이드바 공유 효과를 달성하기 위한 JavaScript 균일 모션(코드)

不言

풀어 주다： 2018-08-31 09:55:31

원래의

1442명이 탐색했습니다.

이 글의 내용은 자바스크립트 균일 모션으로 구현되는 사이드바 공유 효과(코드)에 대한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

원리

offsetLeft(왼쪽에서 개체까지의 거리)와 고정 속도를 사용하세요.
타이머 setInterval 및clearInterval
을 사용하여 현재 위치에서 목표 위치까지의 값이 양수인지 음수인지에 따라 실행 속도가 양수인지 음수인지 결정합니다.

사이드바 공유 효과 달성

<!DOCTYPE html>
<html>
  <head>
    <title>用运动做一个侧边栏分享</title>
    <style>
      #div1{
        width: 150px;
        height: 200px;
        background: #0f0;
        position: absolute;
        left: -150px;
      }
      #div1 span{
        position: absolute;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: #00f;
        right: -20px;
        top: 70px;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
          startMove(10,0);
        }
        oDiv.onmouseout=function(){
          startMove(-10,-150);
        }
      }
      var timer=null;
      function startMove(speed,iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <span>分享到</span>
    </div>
  </body>
</html>

로그인 후 복사

코드를 작성할 때 테스트 최적화를 수행해야 합니다. 테스트에서는 호환성 문제가 없습니다. 캡슐화된 이동 함수에는 두 개의 매개변수가 있습니다. 이때 매개변수를 단순화할 수 있는지 고려합니다.
예를 들어 택시를 탈 때 운전자에게 목적지를 알려줄 수 있지만 목적지에 도달하기 위해 운전자에게 속도를 알려줄 필요가 없으므로 매개변수를 하나의 매개변수로 단순화할 수 있습니다. 구체적인 코드는 다음과 같습니다.

사이드바 공유 효과 달성 - 속도 매개변수 단순화

<!DOCTYPE html>
<html>
  <head>
    <title>用运动做一个侧边栏分享</title>
    <style>
      #div1{
        width: 150px;
        height: 200px;
        background: #0f0;
        position: absolute;
        left: -150px;
      }
      #div1 span{
        position: absolute;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: #00f;
        right: -20px;
        top: 70px;
      }
    </style>
    <script>
      window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmouseover=function(){
          startMove(0);
        }
        oDiv.onmouseout=function(){
          startMove(-150);
        }
      }
      var timer=null;
      function startMove(iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(oDiv.offsetLeft>iTarget){
            speed=-10;
          }else{
            speed=10;
          }
          if(oDiv.offsetLeft==iTarget){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft+speed+"px";
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <span>分享到</span>
    </div>
  </body>
</html>

로그인 후 복사