侧栏左右滑动这样的效果怎么做出来？

类似于很多网站的最右侧有的侧栏式的Jiathis，mouseover这个东西后，这个东西会向左滑出一个菜单，这是怎么做的？

解决方案 »

  1.   

    那个Jaxthis，就是www.8bie.com 最右边橙色的那个“分享到”
    我知道那个Jaxthis是一段代码插件，但是如果我自己写一个有类似效果的脚本，应该咋么写？
    我知道jqury有个jQuery slideToggle()有类似效果，但那是上下的，如果自己写个左右的应该怎么写？
      

  2.   

    做一个div  当鼠标移动到某个位置时让他连续的改变他的left属性试试  以前做过一个   很失败  呵呵
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">   
    html,body{ width:100%;overflow:hidden;} 
        #ad{width:300px;height:200px;position:absolute;top:300px;right:-250px;cursor:hand;}
    </style>
    <script type="text/javascript"> 
     
    if(typeof(HTMLElement) != "undefined")  // 给非IE 浏览器添加方法 contains
    { 
        HTMLElement.prototype.contains = function(obj) 
        {   
          while(obj != null &&  typeof(obj.tagName) != "undefined")   
          { 
                if(obj == this) 
                  return true; 
                obj = obj.parentNode; 
          }    
                return false;   
        };   
    }  
        var right = -250;
        var st, ht;
        function ShowDiv() 
        {
            clearInterval(ht);
            st = setInterval(Show,3);
        }
        function HideDiv() {
            clearInterval(st);
            setTimeout(function(){
            ht = setInterval(Hide, 3);
            },1000); // 1秒后隐藏  
        }
        function Show() {
            if (right < 0) 
            {
                ad.style.right = right+"px";  
                right += 5; 
                      
            }
            else {
                right = 0;
                clearInterval(st);
            }
        }
        function Hide() {
            if (right >= -250) 
            {
                ad.style.right = right+'px';
                 right -= 5;       
            }
            else 
            {
                 right = -250;
                clearInterval(ht);
            }
        }
        var ad;
        window.onload=function(){
         ad = document.getElementById("ad");
        ad.onmouseover=function(e){
                e = e || event; 
                e = e.fromElement || e.relatedTarget ; // IE fromElement  FF:relatedTarget
                if(typeof(e)!="undefined" &&!this.contains(e)){
                    ShowDiv();
                }
            };
        ad.onmouseout=function(e){
              e = e||event; 
              e = e.toElement || e.relatedTarget ; // IE toElement  FF:relatedTarget
              if(typeof(e)!="undefined" &&!this.contains(e))
              {
                HideDiv();
              }
            };
        };
    </script>
    </head>
    <body>
        <div id="ad"  >
        <div style="float:left;width:50px;height:200px;line-height:200px;">分享到</div>
        <div style="background:yellow;width:250px;height:200px;float:left;">很快快捷方式的空间散发的框架是打发空间的方式即可将卡上房贷款及</div>
        </div>
    </body>
    </html>