求一段关于图片展示的js代码

自己隐藏一个img元素，使用绝对定位，然后鼠标移到你对应的图片时，将图片show出来，并且把通过当前鼠标位置或者当前图片位置设定隐藏图片的位置以及把当前图片的src赋值给隐藏的图片

是不是有多少列就要隐藏多少个img元素？

大侠你这个是直接把原来的图片替换了...我是希望在右边弹出个div什么的展示图片

示例<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function()
{
var scale=2;//比例放大两倍
var oUl=document.getElementById('list');
var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
aLi[i].onmouseover=function()
{
var oImg=this.getElementsByTagName('img')[0];
var oDiv=document.createElement('div');
var img=document.createElement('img');
img.style.width=this.offsetWidth*scale+'px';
img.style.height=this.offsetHeight*scale+'px';
img.src=oImg.src;
oDiv.appendChild(img);
oDiv.className='tip';
oDiv.style.top=oImg.offsetTop-getStyle(oImg,'height')/2+'px';
oDiv.style.left=oImg.offsetLeft+getStyle(oImg,'width')+'px';
this.appendChild(oDiv);
}
aLi[i].onmouseout=function()
{
this.removeChild(this.getElementsByTagName('div')[0]);
}
}
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
return parseFloat(obj.currentStyle[attr])||0;
return parseFloat(getComputedStyle(obj,0)[attr])||0;
}
</script>
<style type="text/css">
ul{padding:0;margin:0;width:100px;margin:100px auto;}
li{list-style:none;position:relative;}
img{width:100px;height:100px;}
.tip{position:absolute;border:2px solid #000;}
</style>
</head>
<body>
<ul id="list">
<li>
     <img src="http://c.hiphotos.baidu.com/image/w%3D400/sign=c1f399e760d9f2d3201125ef99ec8a53/1b4c510fd9f9d72ada5eb61bd62a2834349bbbfa.jpg" alt="" />

    </li>
    <li>
     <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=9bc7b0600db30f24359aed03f895d192/377adab44aed2e736b9a9d2d8501a18b87d6fa44.jpg" alt="" />

    </li>
</ul></body>
</html>

我仿照你的写了下，居然不报错也没效果，大侠帮我看看
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
img{width:100px;height:100px;}
.tip{position:absolute;border:2px solid #000;}
</style>
<script>function big(img,FitWidth,FitHeight){

var oDiv=document.createElement('div');
var  img_t=document.createElement('img');
img_t.style.width=this.offsetWidth*2+'px';
img_t.style.height=this.offsetHeight*2+'px';
img_t.src=img.src;
oDiv.appendChild(img_t);
oDiv.className='tip';
oDiv.style.top=0+'px';
oDiv.style.left=img.offsetLeft+getStyle(img,'width')+4+'px';
img.appendChild(oDiv);
}
function small(img,FitWidth,FitHeight){
var oDiv=document.createElement('div');
var  img_t=document.createElement('img');
img_t.src=img.src;
oDiv.appendChild(img_t);
oDiv.className='tip';
oDiv.style.top=0+'px';
oDiv.style.left=img.offsetLeft+getStyle(img,'width')+4+'px';
img.appendChild(oDiv);
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
return parseFloat(obj.currentStyle[attr])||0;
return parseFloat(getComputedStyle(obj,0)[attr])||0;
}
</script></head><body>
<table border="1px">
<tr><td>
<img src="../picture/AV114005.jpg" width="60px" height="60px"  onmouseover="big(this,370,600)" onmouseout="small(this)"/>
</td>
<td>--------------------------------------</td>
</tr>
<tr><td>
<img src="../picture/AV114005.jpg" width="60px" height="60px" />
</td>
<td>--------------------------------------</td>
</tr>
<tr><td>
<img src="../picture/AV114005.jpg" width="60px" height="60px"  />
</td>
<td>--------------------------------------</td>
</tr>
</body>
</html>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.box{position:relative;}
.tip{position:absolute;border:2px solid #000;}
</style>
<script>function big(img,FitWidth,FitHeight){
var oDiv=document.createElement('div');
var  img_t=document.createElement('img');
img_t.style.width=img.offsetWidth*2+'px';
img_t.style.height=img.offsetHeight*2+'px';
img_t.src=img.src;
oDiv.appendChild(img_t);
oDiv.className='tip';
oDiv.style.top=0+'px';
oDiv.style.left=img.offsetLeft+getStyle(img,'width')+4+'px';
img.parentNode.appendChild(oDiv);
}
function small(img,FitWidth,FitHeight){
img.parentNode.removeChild(img.parentNode.getElementsByTagName('div')[0]);
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
return parseFloat(obj.currentStyle[attr])||0;
return parseFloat(getComputedStyle(obj,0)[attr])||0;
}
</script></head><body>
<table border="1px">
<tr><td>
<div class="box">
<img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=9bc7b0600db30f24359aed03f895d192/377adab44aed2e736b9a9d2d8501a18b87d6fa44.jpg" width="60px" height="60px"  onmouseover="big(this,370,600)" onmouseout="small(this)"/>
</div>
</td>
<td>--------------------------------------</td>
</tr>
<tr><td>
<img src="../picture/AV114005.jpg" width="60px" height="60px" />
</td>
<td>--------------------------------------</td>
</tr>
<tr><td>
<img src="../picture/AV114005.jpg" width="60px" height="60px"  />
</td>
<td>--------------------------------------</td>
</tr>
</body>
</html>

这两句有bug，
oDiv.style.top=0+'px';
oDiv.style.left=img.offsetLeft+getStyle(img,'width')+4+'px';
把这个js代码运用于有很多行的表格时，放大后出现的图片的位置个本该是事件触发所在的行，但发现放大图片出现的位置是固定的。该怎么修改？

难道是用了easyui导致offsetTop只能获得第一个的元素的位置

调试易

求一段关于图片展示的js代码

解决方案 »