图象层定位有关问题
日期：2014-05-16 浏览次数：20345 次
图象层定位问题?
一个页面有4*4 16个图片
当鼠标放在随便一个图片上时,这个图片的position被设置,z-index为999(顶层显示)
但是这个图片的位置怎么确定?就是top,left值怎么确定?如果z-index有效果,position要被设置,position被设置,top,left也要被设置,不设置,图片就顶在左上角了
怎么解决?
样子:http://search.live.com/images/results.aspx?q=car&form=QBIR&go.x=18&go.y=14#
------解决方案--------------------
有点难度，关注
------解决方案--------------------
将鼠标移上去显示的内容做一个层，层的position设为absolute,其left和top可以根据原小图的offsetLeft和offsetTop（即左顶点的位置）加减相应的值来调整。另外要考虑当图层显示遇到边界时将其位置调整到可视范围内。
下面是我做的一个功能很简单的小例子供参考：
<HTML>
<HEAD>
<TITLE> </TITLE>
</head>
<body style= "font-size:12px; ">
<!--图片部分-->
<div>
<img src= "http://community.csdn.net/logo/images/prj.210.67.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<img src= "http://www.csdn.net/Images/logo_csdn.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<br> <br> <br>
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<img src= "http://images.csdn.net/20061201/企业认证.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
</div>
<!--显示图片相关信息的层-->
<div id= "morediv " style= "position:absolute; left:0px; top:0px; width:250px; border:3px double green; visibility:hidden; z-index:999; background:#EEEEEE; " onmouseout= "this.style.visibility= 'hidden '; ">
<div id= "namediv " style= "font-size:16px; font-weight:bold; height:25px; padding:5px; background:green; color:white; "> </div>
<div id= "srcdiv " style= "text-align:center; padding-top:10px; padding-bottom:10px; "> </div>
<div id= "sizediv " style= "font-size:16px; font-weight:bold; height:25px; padding:5px; background:green; color:white; "> </div>
</div>
<script type= "text/javascript " language= "javascript ">
//参数：
//Psrc：图片的url
//Pwidth：图片的宽度
//Pheight：图片的高度
//Pleft：图片相对于浏览器客户区域左上角X轴坐标
//Ptop：图片相对于浏览器客户区域左上角Y轴坐标
function showmore(Psrc,Pwidth,Pheight,Pleft,Ptop){
var filename=Psrc.substring(Psrc.lastIndexOf( '/ ')+1,Psrc.length);//截取文件名
var morediv=document.getElementById( 'moreDiv ');
document.getElementById( 'namediv ').innerText= '文件名： '+filename;//在层中写入图片文件名
document.getElementById( 'srcdiv ').innerHTML= ' <img src= " '+Psrc+ ' " style= "border:3px double green; "> ';
//在层中显示图片
document.getElementById( 'sizediv ').innerText= '图片大小： '+Pwidth+ '* '+Pheight;//在层中写入图片大小
morediv.style.left=Pleft-(morediv.clientWidth-Pwidth)/2;//计算层左上角X轴坐标
if(morediv.style.left.charAt(0)== '- ') morediv.style.left=0;//如果层超过左边界则让其左侧坐标为0
morediv.style.top=Ptop-(morediv.clientHeight-Pheight)/2;//计算层左上角Y轴坐标
if(morediv.style.top.charAt(0)== '- ') morediv.style.top=0;//如果层超过上边界则让其上侧坐标为0
//我这里假设让层显示在和小图片中心点重合的区域内，你
一个页面有4*4 16个图片
当鼠标放在随便一个图片上时,这个图片的position被设置,z-index为999(顶层显示)
但是这个图片的位置怎么确定?就是top,left值怎么确定?如果z-index有效果,position要被设置,position被设置,top,left也要被设置,不设置,图片就顶在左上角了
怎么解决?
样子:http://search.live.com/images/results.aspx?q=car&form=QBIR&go.x=18&go.y=14#
------解决方案--------------------
有点难度，关注
------解决方案--------------------
将鼠标移上去显示的内容做一个层，层的position设为absolute,其left和top可以根据原小图的offsetLeft和offsetTop（即左顶点的位置）加减相应的值来调整。另外要考虑当图层显示遇到边界时将其位置调整到可视范围内。
下面是我做的一个功能很简单的小例子供参考：
<HTML>
<HEAD>
<TITLE> </TITLE>
</head>
<body style= "font-size:12px; ">
<!--图片部分-->
<div>
<img src= "http://community.csdn.net/logo/images/prj.210.67.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<img src= "http://www.csdn.net/Images/logo_csdn.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<br> <br> <br>
<img src= "http://images.csdn.net/20070306/API120[1].60.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
<img src= "http://images.csdn.net/20061201/企业认证.gif " style= "border:3px double green; " hspace= "8 " onmouseover= "showmore(this.src,this.width,this.height,this.offsetLeft,this.offsetTop) ">
</div>
<!--显示图片相关信息的层-->
<div id= "morediv " style= "position:absolute; left:0px; top:0px; width:250px; border:3px double green; visibility:hidden; z-index:999; background:#EEEEEE; " onmouseout= "this.style.visibility= 'hidden '; ">
<div id= "namediv " style= "font-size:16px; font-weight:bold; height:25px; padding:5px; background:green; color:white; "> </div>
<div id= "srcdiv " style= "text-align:center; padding-top:10px; padding-bottom:10px; "> </div>
<div id= "sizediv " style= "font-size:16px; font-weight:bold; height:25px; padding:5px; background:green; color:white; "> </div>
</div>
<script type= "text/javascript " language= "javascript ">
//参数：
//Psrc：图片的url
//Pwidth：图片的宽度
//Pheight：图片的高度
//Pleft：图片相对于浏览器客户区域左上角X轴坐标
//Ptop：图片相对于浏览器客户区域左上角Y轴坐标
function showmore(Psrc,Pwidth,Pheight,Pleft,Ptop){
var filename=Psrc.substring(Psrc.lastIndexOf( '/ ')+1,Psrc.length);//截取文件名
var morediv=document.getElementById( 'moreDiv ');
document.getElementById( 'namediv ').innerText= '文件名： '+filename;//在层中写入图片文件名
document.getElementById( 'srcdiv ').innerHTML= ' <img src= " '+Psrc+ ' " style= "border:3px double green; "> ';
//在层中显示图片
document.getElementById( 'sizediv ').innerText= '图片大小： '+Pwidth+ '* '+Pheight;//在层中写入图片大小
morediv.style.left=Pleft-(morediv.clientWidth-Pwidth)/2;//计算层左上角X轴坐标
if(morediv.style.left.charAt(0)== '- ') morediv.style.left=0;//如果层超过左边界则让其左侧坐标为0
morediv.style.top=Ptop-(morediv.clientHeight-Pheight)/2;//计算层左上角Y轴坐标
if(morediv.style.top.charAt(0)== '- ') morediv.style.top=0;//如果层超过上边界则让其上侧坐标为0
//我这里假设让层显示在和小图片中心点重合的区域内，你
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
