search

Home  >  Article  >  Web Front-end  >  JavaScript uniform motion to achieve sidebar sharing effect (code)

JavaScript uniform motion to achieve sidebar sharing effect (code)

不言
不言Original
2018-08-31 09:55:311434browse

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>

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use cropper.js on the mobile terminal to crop images and upload them (code analysis)Next article：How to use cropper.js on the mobile terminal to crop images and upload them (code analysis)

Related articles

See more