码迷,mamicode.com
首页 > 其他好文 > 详细

侧边栏的分享到

时间:2016-08-19 14:40:24      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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

侧边栏的分享到

标签:

原文地址:http://www.cnblogs.com/-qiang/p/5786306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!