放大图片的js

278261631

浏览: 67195 次
性别:
来自: 青岛

最近访客更多访客>>

liubaixu123456

763691

tjhongteng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

    <html>  
    <head>  
    <title>emu</title>  
    </head>  
    <body>  
    <BR>  
    原图：<BR>  
    <img src="no_picture.jpg"   
      
    onmousemove='zoom()' onmouseout='hideBigImg()'  id="srcImg" style="margin-left:100px;">  
    <BR>  
    局部放大图：<BR>  
	<div id="debug"></div>
	<!--1-->
    <div style='overflow:hidden;display:none;z-index:1;left:400;top:30px; position:absolute;' id='bigImgDiv'><img id="zoomImg"></div>  
    

	<!--2-->	
    <script language="javascript" type="text/javascript">  
    <!--  
	
	
	 	var zoomImg;
    var srcImg;
    var zoomRate = 3; 
   	window.attachEvent('onload',initZoom)
   function initZoom()
   {
   	zoomImg=document.getElementById('zoomImg');
	
	srcImg=document.getElementById('srcImg');
    zoomImg.src = srcImg.src;  

	zoomImg.width = srcImg.width*zoomRate;  
    zoomImg.height = srcImg.height*zoomRate;  
    zoomImg.parentNode.style.width = srcImg.width;  
    zoomImg.parentNode.style.height = srcImg.height;  
   }
	
	

    function zoom(){  
	document.getElementById('bigImgDiv').style.display='block';
    var elm = event.srcElement;  
    h = elm.offsetHeight/zoomRate/2;  
    w = elm.offsetWidth/zoomRate/2;  
    var x = event.x-elm.offsetLeft;  
    xx=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;  
    zoomImg.style.marginLeft=(w-xx)*zoomRate;  
    var y = event.y-elm.offsetTop;  
    yy=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;  
    zoomImg.style.marginTop=(h-yy)*zoomRate;  
	document.getElementById('debug').innerHTML=event.x+":"+event.y+"-"+elm.offsetLeft+"-"+elm.offsetTop;
    }  
	
	function hideBigImg(){
		document.getElementById('bigImgDiv').style.display='none';
	}

    //-->  
    </script>  
    </body>  
    </html>

这是在FF里是可以的但是在IE中会因为elm.offsetLeft elm.offsetTop 解释的不同而造成非直接放在body中的图像位置获取错误

分享到：