js运动：分享到

定时器及运动函数的使用。

 

<!--
Author: XiaoWen
Create a file: 2016-12-14 09:41:11
Last modified: 2016-12-14 10:11:53
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分享到</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 100px;
      height: 100px;
      position: fixed;
      top: 40px;
      left: -100px;
      background: #ccc;
    }
    #box .share{
      width: 20px;
      height: 60px;
      background: #f00;
      position: absolute;
      right: -20px;
      top: 20px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div class="share">分享到</div>
  </div>
  <script>
    var box=document.getElementById("box");
    var share=box.getElementsByClassName("share")[0];
    box.onmouseover=function(){
      move(box,'left',0)
    }
    box.onmouseout=function(){
      move(box,'left',-100)
    }
    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];
      }else{
        return getComputedStyle(obj)[attr];
      }
    }
    var timer=null;
    function move(obj,attr,iTarget){
      clearInterval(obj.timer)
      obj.timer=setInterval(function(){
        var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;
        speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);
        if(iTarget==parseInt(getStyle(obj,attr))){
          clearInterval(obj.timer);
        }else{
          obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
        }
      },10)
    }
  </script>
</body>
</html>

 

posted @ 2016-12-14 10:28  程序媛李李李李蕾  阅读(164)  评论(0)    收藏  举报