javascript实现（分享到xxx）的小实例

   <div id="tag">
   <span id="showInfo">分享到</span>
   </div>

#tag{
    height:200px;
    width:200px;
    background:green;
    position:absolute;
    top:100px;
    left:-200px;

}
#tag span{
    height:60px;
    width:20px;
    background:red;
    position:absolute;
    top:90px;
    left:200px;
    z-index:10px;
    cursor:pointer;
    
}

 var speed=6;
 var Timer=null;
 function show(obj){
     clearInterval(Timer);   
      Timer=setInterval(function (){
          if(obj.offsetLeft<=0){ 
           obj.style.left=obj.offsetLeft+speed+"px";
          }else{
             clearInterval(Timer);  
          }
     },30)
     
 };
  function hide(obj){
     clearInterval(Timer);   
      Timer=setInterval(function (){
          if(obj.offsetLeft<=-200){ 
             clearInterval(Timer);  
          }else{
            
            obj.style.left=obj.offsetLeft-speed+"px";
          }
     },30)
     
 }

 window.onload=function (){
     var obj=document.getElementById("tag");
      obj.onmouseover=function(){
          show(obj);
      };
      obj.onmouseout=function (){
           hide(obj);
        
      };
 }

  function getPublic(obj,s,speed){
      clearInterval(Timer);
      Timer=setInterval(function (){
          if(obj.offsetLeft==s){   //这里有待优化，因为在取等的时候，可能会掉过该“阀门”，而取大于或者小于的时候，可能会超出或者减少
              clearInterval(Timer);  
          }else{
             obj.style.left=obj.offsetLeft+speed+"px";
          }
      },30) 
  }
 //这个是代码实现底部滴呀
 //然后我们进行后话滴呀
 //
 window.onload=function (){
     var obj=document.getElementById("tag");
      obj.onmouseover=function(){
            getPublic(obj,0,10);
      };
      obj.onmouseout=function (){
            getPublic(obj,-200,-10);
        
      };
 }

function getPublic2(obj,s){
      clearInterval(Timer);
      var speed=0;
      if((s-obj.offsetLeft)>0){
          speed=5;
      }else{
          speed=-5;
      }
      Timer=setInterval(function (){
          if(obj.offsetLeft==s){   //这里又待优化，应为在去等的时候，可能会掉过该“阀门”
              clearInterval(Timer);  
          }else{
             obj.style.left=obj.offsetLeft+speed+"px";
          }
      },30) 
  }
 //这个是代码实现底部滴呀
 //然后我们进行后话滴呀
 //
 window.onload=function (){
     var obj=document.getElementById("tag");
      obj.onmouseover=function(){
            getPublic2(obj,0);
      };
      obj.onmouseout=function (){
            getPublic2(obj,-200);
        
      };
 }