侧边栏的分享到

  <!Doctype html>
  <html>
  <head>
  <meta charset="utf-8">
   
  <style>
  *{margin:0;padding:0;}
  #div{width:100px;height:300px;background:green;position:absolute;left:-100px;}
  #div span{height:70px;background:yellow;position:absolute;top:100px;left:100px;}
  </style>
  </head>
  <body>
  <div id="div">
  <span>分享到</span>
  </div>
  <script>
  var odiv=document.getElementById('div');
   
  odiv.onmouseover=function (){
  ss(10,0);
  }
  odiv.onmouseout=function(){
  ss(-10,-100);
  }
   
  var timer=null;
  function ss(aa,bb){
  //bb目标
  clearInterval(timer);
  timer=setInterval(function(){
  if(odiv.offsetLeft==bb){
  clearInterval(timer)
  }else{
  odiv.style.left=odiv.offsetLeft+aa+'px';
  }
   
  },33)
   
  }
   
  </script>
  </body>
  </html>
posted @ 2016-08-19 13:32  多幸运1号  阅读(160)  评论(0)    收藏  举报