bom Case 5- simple animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #box1 {
      margin-top: 10px;
      position: relative;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <input type="button" id="btn" value="动画 800">
  <input type="button"

  
  
  
  
  
    

     box1 = document.getElementById('box1');

    btn.onclick = function () {
      animate(box, 800);
      animate(box1, 800);
      // console.log(box.style.left);
      // console.log(box.offsetLeft);

      // box.style.left = box.offsetLeft + 10 + 'px';

      // console.log(box.style.left);
      // console.log(box.offsetLeft);
    }

    btn1.onclick = function () { 
      animate(box, 400);
      animate(box1, 400 );
       //   the console.log (box.style.left); 
      // the console.log (box.offsetLeft); 

      // box.style.left box.offsetLeft = - 10 + 'PX'; 

      // the console.log (box.style.left); 
      // the console.log (box.offsetLeft); 
    }
     // var the timerId = null; 
    // function package animation 
    function Animate (Element, target) {
        // by determining, to ensure that only the page Animate a timer 
      IF (element.timerId) { 
        the clearInterval (element.timerId); 
        the timerId =  null ; 
      } 

      element.timerId = the setInterval (function () {
         // step per distance moved 
        var STEP =  10 ;
         // cassette current location 
        var Current = element.offsetLeft;
         // When executing an animation from 400 to 800 
        // when the animation is not performed 800-400 

        // determines if the current position> target step position at that time is smaller than 0 
        IF (current > target) { 
          step =  - the Math.abs (step); 
        } 

        // the Math.abs (current - target) <the Math.abs (step ) 
        IF (the Math.abs (Current - target)    < the Math.abs (STEP)) {
          // make timer stops 
          the clearInterval (element.timerId);
           // allow the cassette to the target position 
          element.style.left = target +  ' PX ' ;
           return ; 
        } 
        // mobile box 
        Current + = STEP; 
        element.style.left = Current +  ' PX ' ; 
      }, 30 ); 
    } 
  </ Script > 
</ body > 
</ HTML >
bom Case 5- simple animation

Guess you like
