javascript 匀速运动完成侧边栏分享结果

2023年2月14日 160次阅读 来源: 666888

道理

  • 采纳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>
    原文作者：666888
    原文地址: https://segmentfault.com/a/1190000016194473
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞