55_G_1244758741638.jpg是55_P_1244758742041.jpg做的一张尺寸按同比例缩小的图。现在下面的这段代码已经实现了,移动鼠标到55_G_1244758741638.jpg上,会在一个DIV(和55_G_1244758741638.jpg图片的宽高相同)里显示大图55_P_1244758742041.jpg,但是呢,这个大图不是实际大小,图片产生了锯齿。
现要修改的地方是:
鼠标到小图55_G_1244758741638.jpg的任何地方,显示实际尺寸大图对应的地方。就可以了。源码不知道改哪?<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
<img src="55_G_1244758741638.jpg" name="srcImg" width="230
" id=srcImg style="cursor:crosshair;display:block;float:left;" onMouseMove='zoom()' onMouseOut="hidden()">
<div style='position:relative;left:15px;top:0px;overflow:hidden;display:none;' id="two"><img id=zoomImg></div>
<script language="javascript" type="text/javascript">
<!--
zoomImg.src = "55_P_1244758742041.jpg";
srcImg.height = srcImg.height;
var zoomRate = 2;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
var hidden=function(){
        document.getElementById("two").style.display="none";
    };
function zoom(){
document.getElementById("two").style.display="";
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</script>
</body>
</html>

解决方案 »

  1.   

    可以修改var zoomRate = 2;的值来增大倍数或减小到相应的倍数,原因很可能是你缩小的图片扩大2倍达不到原有尺寸
      

  2.   

    zoomImg.src = "55_P_1244758742041.jpg";
    var wl=zoomImg.width;
    document.write(wl);
    输出显示为0,不知道为什么?
      

  3.   

    img src="55_G_1244758741638.jpg" name="srcImg" width="230
    " 改成你要的
      

  4.   

    最终自己解决了问题。
    只要设置var zoomRate = 2;这时的放大比例为大图片除以小图片的比值,就可以得到我要的效果了。谢谢各位。
    最终为了获取该值的添加代码为:
    var zoomImg1 = new Image();
    zoomImg.src = "55_P_1244758742041.jpg";
    zoomImg1.src = "55_P_1244758742041.jpg";
    var wl=zoomImg1.width/srcImg.width;
    srcImg.height = srcImg.height;
    var zoomRate = wl;