JS实现多物体动画

一、多物体边栏弹出动画

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多物体边栏弹出动画</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  div{width:200px;height:200px;background-color:#ccc;position:absolute;left:-200px;}
  #box2{top:210px;}
  #box3{top:420px;}
  #box4{top:630px;}
  span{display:block;font-size:16px;line-height:30px;font-family:微软雅黑;text-align:center;width:24px;height:60px;background-color:orange;position:absolute;left:200px;top:70px;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var box = document.getElementsByTagName('div');
      for(var i=0;i<box.length;i++){
        box[i].onmouseover = function(){move(this,0);}
        box[i].onmouseout = function(){move(this,-200);}
      }
    }


    function move(obj,aim){
      clearInterval(obj.timer);
      obj.timer = setInterval(function(){
        var spd = spd>=0?Math.ceil((aim-obj.offsetLeft)/10):Math.floor((aim-obj.offsetLeft)/10);
        if(obj.offsetLeft==aim){
          clearInterval(obj.timer);
        }
        else{
          obj.style.left = obj.offsetLeft+spd+'px';
        }
      },30)

      
    }
  </script>
</head>
<body>
  <div id="box1" style=""><span>分享</span></div>
  <div id="box2" style=""><span>分享</span></div>
  <div id="box3" style=""><span>分享</span></div>
  <div id="box4" style=""><span>分享</span></div>
</body>
</html>

 

二、多物体透明度渐变动画

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多物体透明度渐变动画</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  div{width:200px;height:200px;margin:10px;background-color:red;filter:alpha(opacity=30);opacity:0.3;}
  </style>
  <script type="text/javascript">
  window.onload = function(){
    var div = document.getElementsByTagName('div');
    for(var i=0;i<div.length;i++){
      div[i].onmouseover = function(){chgopa(this,100);}
      div[i].onmouseout = function(){chgopa(this,30);}
      div[i].opa = 30;
    }
  }


  function chgopa(obj,aim){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
      var spd = (aim-65)/3.5;
      if(obj.opa==aim){
        clearInterval(obj.timer);
      }
      else{
        obj.opa = obj.opa + spd;
        obj.style.opacity = obj.opa/100;
        obj.style.filter = 'alpha(opacity=' + obj.opa + ')';
      }
    },30)
  }

  </script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

 

posted @ 2017-05-15 17:25  oliverlht  阅读(163)  评论(0)  编辑  收藏  举报