javascript 控制 div 层显示位置的问题

定位不准是因为你写的JS不正确,修改下面两个函数(需要再调整一下):function  getL(e){  var obj = document.getElementById(e);
var  l=obj.offsetLeft;  while(obj=obj.offsetParent){  
l+=obj.offsetLeft;  
}  
return  l  
}  
 
function  getT(e){  
var obj = document.getElementById(e);
var  t=obj.offsetTop;  
while(obj=obj.offsetParent){  
t+=obj.offsetTop;  
}  
return  t  
}  

解决方案 »

  1.   

    可我把以上代码替换原来的之后，第一个链接没内容显示，第二个链接还是跑到顶上去了。在ff里也是一样，不知道你那边是怎么做到的？<HTML>
    <body>
    <p>&nbsp;</p>
    <p><a href="#" onmouseover="show(1)" onmouseout="hide(1)">显示一图片</a>
    </p>
    <div id="m1" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(1)" onmouseout="hide(1)">
    wwwwww</img>
    </div>
    <p><br>
    </p>
    <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq<a href="#" id="2" onmouseover="show(2)" onmouseout="hide(2)">显示一电影</a>
    <div id="m2" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(2)" onmouseout="hide(2)">
    qqqqqqqqqqq</img>
    </div>
        <script>  
    function  show(o){ 
    //alert(o) 
    var  m=document.getElementById("m"+o)  
    m.style.pixelLeft=getL(o)  
    m.style.pixelTop=getT(o)+o.offsetHeight  
    m.style.visibility=''  
    }  
     
    function  hide(o){  
    document.getElementById("m"+o).style.visibility='hidden'  
    }  
     
    function  getL(e){     var obj = document.getElementById(e); 
    var  l=obj.offsetLeft;     while(obj=obj.offsetParent){     
    l+=obj.offsetLeft;     
    }     
    return  l     
    }     
      
    function  getT(e){     
    var obj = document.getElementById(e); 
    var  t=obj.offsetTop;     
    while(obj=obj.offsetParent){     
    t+=obj.offsetTop;     
    }     
    return  t     
    }         </script>
    </p>
    </body>
    </HTML>
      

  2.   

    <HTML>
    <body>
    <p>&nbsp;</p>
    <!-------------这里少了id-------------->
    <p><a href="#" id="1"  onmouseover="show(1)" onmouseout="hide(1)">显示一图片</a>
    </p>
    <div id="m1" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px 
    solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px
     solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(1)" onmouseout="hide(1)">
    wwwwww</img>
    </div>
    <p><br>
    </p>
    <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq<a href="#" id="2" onmouseover="show(2)" onmouseout="hide(2)">显示一电影</a>
    <div id="m2" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px 
    solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(2)" onmouseout="hide(2)">
    qqqqqqqqqqq</img>
    </div>
        <script>  
    function  show(o){ 
    //alert(o) 
    var  m=document.getElementById("m"+o)  
    m.style.left=getL(o)  //====设置的是left属性
    //而且注意需要document.getElementById
    m.style.top=getT(o)+document.getElementById(o).offsetHeight //====设置的是top属性
    m.style.visibility=''  
    }  
     
    function  hide(o){  
    document.getElementById("m"+o).style.visibility='hidden'  
    }  
     
    function  getL(id){  
    var e=document.getElementById(id);
    var  l=e.offsetLeft;  
    while(e=e.offsetParent){  
    l+=e.offsetLeft;  
    }  
    return  l  
    }  
     
    function  getT(id){  
    var e=document.getElementById(id);
    var  t=e.offsetTop;  
    while(e=e.offsetParent){  
    t+=e.offsetTop;  
    }  
    return  t  
    }  
        </script>
    </p>
    </body>
    </HTML>
      

  3.   

    位置显示终于正常了，非常感谢showbo ，请问这句在ff里图片内容显示不了，该怎么修改才能在ff里也能把图片显示出来？var fileval = eval("document.getElementById('file_"+fileid+"').value");
    <img src="'+fileval+'" width="50" height="54" border="0"/>
      

  4.   

    var fileval = eval("document.getElementById('file_"+fileid+"').value");
    <img src="'+fileval+'" width="50" height="54" border="0"/>你上面的代码加哪里?????
      

  5.   

    嗯,show(o)函数中的m.style.pixelTop=getT(o)+o.offsetHeight也不正确,改了后忘了给你
      

  6.   

    是加在显示层div里。
    值是通过div外部的文件域获得<input type="file" value="" name="file'+UU+'" title="附件" size="30" id="file_'+UU+'">
      

  7.   

    还是不清楚你想干什么???把相应的图片加载到div里面?? 你的fileid参数哪里来的?<input type="file" value=""name="file'+UU+'" title="附件" size="30" id="file_'+UU+'"> 你上面的又从哪里来?
      

  8.   

    原代码过长，我做了个简化的贴出来了。在ie里正常，在ff里就显示空白<HTML>
    <body>
    <form enctype="multipart/form-data">
    <p>
      <input name="file1" type="file" id="file_1" onblur="javascript:ReSubmit(1);">
    </p>
    <!-------------这里少了id-------------->
    <p><a href="#" id="1"  onmouseover="show(1)" onmouseout="hide(1)">显示一图片</a>
    </p>
    <div id="m1" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px 
    solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px
     solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(1)" onmouseout="hide(1)"><span id="ming"></span>
    <script>
    function ReSubmit(fileid)
    {
    var fileval = eval("document.getElementById('file_"+fileid+"').value");
    document.getElementById("ming").innerHTML='<img src="'+fileval+'"  border="0"/>'}
    </script>
    </div>
    <p><br>
      <input type="file" name="file2" id="file_2" onblur="javascript:ReSubmit2(2);">
    </p>
    <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq<a href="#" id="2" onmouseover="show(2)" onmouseout="hide(2)">显示一电影</a>
    <div id="m2" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px 
    solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
    onmouseover="show(2)" onmouseout="hide(2)">
    <span id="ming2"></span>
    <script>
    function ReSubmit2(fileid)
    {
    var fileval = eval("document.getElementById('file_"+fileid+"').value");
    document.getElementById("ming2").innerHTML='<img src="'+fileval+'"  border="0"/>'}
    </script>
    </div>
        <script>  
    function  show(o){ 
    //alert(o) 
    var  m=document.getElementById("m"+o)  
    m.style.left=getL(o)  //====设置的是left属性
    //而且注意需要document.getElementById
    m.style.top=getT(o)+document.getElementById(o).offsetHeight //====设置的是top属性
    m.style.visibility=''  
    }  
     
    function  hide(o){  
    document.getElementById("m"+o).style.visibility='hidden'  
    }  
     
    function  getL(id){  
    var e=document.getElementById(id);
    var  l=e.offsetLeft;  
    while(e=e.offsetParent){  
    l+=e.offsetLeft;  
    }  
    return  l  
    }  
     
    function  getT(id){  
    var e=document.getElementById(id);
    var  t=e.offsetTop;  
    while(e=e.offsetParent){  
    t+=e.offsetTop;  
    }  
    return  t  
    }  
        </script>
    </p>
    </form>
    </body>
    </HTML>
      

  9.   

    function ReSubmit(fileid)
    {
        var fileval = eval("document.getElementById('file_"+fileid+"').value");
    //把"file://"加上,ff需要
    document.getElementById("ming").innerHTML='<img src="file://'+fileval+'"  border="0"/>'}
    function ReSubmit2(fileid)
    {
        var fileval = eval("document.getElementById('file_"+fileid+"').value");
    //把"file://"加上,ff需要
    document.getElementById("ming2").innerHTML='<img src="file://'+fileval+'"  border="0"/>'}
      

  10.   

    真是奇怪了，我这边显示不出图片内容来。除了把把"file://"加上，其他地方还有修改过吗？
      

  11.   

    你直接在页面上放一个标签<img src="file://e:\1.jpg"/>看能不能显示图片.而且注意你的file控件是在onblur后才设置图片的,file失去了焦点没有?没失去焦点也不会显示图片
      

  12.   

    我在页面上直接放<img   src="file://e:\1.jpg"/>  在ff里还是只出现一个图片框和以前的一样，按理上图片内容已经存在，只是没有显示出来。 我在网上查了下，有的解释说是 ff 里的安全设置限制了本地图片的浏览，