鼠标移动,层跟着滚动条移动,页面会被拉长,出现空白,怎么解决呢.

这个问题我看到很多大网站也存在，没有解决，如tom,sina等

解决方案 »

  1.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>
    body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    }
    div#wrap_outer {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0px 30px 30px 30px;
      }#glideDiv0 
    { 
    position: absolute; 
    top: 50; 
    left:0;
    z-index:200; 
    width:28px;
    background-color:#E6EEE7;
    } 
    </style>
    <script language=javascript>
    var beginMoving=false;
    var beginResizing=false;function MouseDownToRemove(obj){
    obj.mouseDownX=event.clientX;
    obj.mouseDownY=event.clientY;
    obj.originalOffsetLeft=obj.offsetLeft;
    obj.originalOffsetTop=obj.offsetTop;
    beginMoving=true;
    obj.setCapture();
    }
    function MouseMoveToRemove(obj){
        if(!beginMoving) return false;
    if(event.x>1 && event.x<document.body.clientWidth) //防止被移出页面之外，造成无法移回的后果
      obj.style.left = obj.originalOffsetLeft+(event.x-obj.mouseDownX);
    if(event.y>1 && event.x<document.body.clientHeight) 
      obj.style.top = obj.originalOffsetTop+(event.y-obj.mouseDownY);;
    }
    function MouseUpToRemove(obj){
    obj.releaseCapture();
    beginMoving=false;
    }
    </script></head><body>
    <div id="wrap_outer">
    <!-- layers that slide go here. 
     Be sure to include id for each layer in style sheet in head -->
    <br/><br/>固定Div,且scroll时Div不闪动。  
    <br/><br/>部分代码来自：http://www.javalobby.org/forums/thread.jspa?threadID=16484&tstart=0  
    <br/><br/>  
    <br/><br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                                 
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa                  
    <br/><br/>aaaa  
    <!-- end wrap_outer div--></div>
    <div id="glideDiv0" onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this)  >         
    a<br>
    b<br>
    c<br>
    d<br>
    e<br>
    f<br>
    g<br>
    <br>
    </div>
    </body></html>
      

  2.   

    放在文字上面显示层的一个例子 
    <script>
    function showtip(text)  
    {
     if (document.all&&document.readyState=="complete")
     {
      document.all.tooltip.innerHTML="<div vAlign=center><font style='font-size: 12px;'>"+text+"</font></div>";
      document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollLeft;
      document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
       if (event.clientX>900)
      {
       document.all.tooltip.style.pixelLeft=780;
       document.all.tooltip.style.pixelTop=event.clientY+document.body.scrollTop+10;
      }
      document.all.tooltip.style.visibility="visible";
     }
    }document.write(
     "<div id=\"tooltip\" style=\"position:absolute;visibility:hidden; padding:3px;border:1px solid #C0C0C0;\
     ;background-color:#FFFFFF; height: 19px; left:77;top: 96px;z-index:10;\"></div>");
    function hidetip()  
    {
     if (document.all)
     document.all.tooltip.style.visibility="hidden";
    }
    </script><A onmousemove=showtip('测试显示层') onmouseout=hidetip() href=http://northelec3.ic.net.cn/ 
          target=_blank>威利龙深圳分公司</A></BODY></HTML>
     
      

  3.   

    回复人： hzhla(hzhla) ( ) 信誉：85  2005-12-06 10:28:00  得分: 0  
    -----
    .表示class
    #表示id
    什么都不带表示tagName
      

  4.   

    改成.为什么就不行了呢。#这个也是样式的一种吧，用法和样式差不多的啊。
    上面的代码我试过不要scipt部分也是可以的，但是把#部分的属性直接放到标签中，比如：
    <div   position: absolute;  top: 50;  left:0; z-index:200; width:28px;background-color:#E6EEE7;>         
    a<br>
    b<br>
    c<br>
    d<br>
    e<br>
    f<br>
    g<br>
    <br>
    </div>这样就不行了，为什么？是不是#在作怪，麻烦详细说明一下，谢谢了。麻烦了。