JavaScript uniform motion to achieve sidebar sharing effect (code)-JS Tutorial-php.cn

JavaScript uniform motion to achieve sidebar sharing effect (code)

不言

Release： 2018-08-31 09:55:31

Original

1434 people have browsed it

The content this article brings to you is about the sidebar sharing effect (code) achieved by javascript uniform motion. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Principle

Use offsetLeft (the distance of the object from the left) plus a fixed speed.
Use timers setInterval and clearInterval
Determine whether the running speed is positive or negative based on whether the current position to the target position is a positive or negative value negative value.

Achieve sidebar sharing effect

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

Copy after login

When we write a piece of code, we should perform test optimization. There are no compatibility issues in the test. The encapsulated movement function has two parameters. At this time, we consider whether the parameters can be simplified.
For example, when we take a taxi, we can tell the driver the destination, but we don’t have to tell the driver how fast to get to the destination, so we can simplify the parameter to one parameter. The specific code is as follows.

Realizing the sidebar sharing effect—simplifying the speed parameters

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

Copy after login

Related recommendations:

javascript Implementing dynamic sidebar examples in detail

Native javascript achieves uniform motion animation effect_javascript skills

The above is the detailed content of JavaScript uniform motion to achieve sidebar sharing effect (code). For more information, please follow other related articles on the PHP Chinese website!