放大图片的js

最新推荐文章于 2024-01-25 12:27:20 发布

m278261

最新推荐文章于 2024-01-25 12:27:20 发布

阅读量83

点赞数

文章标签： IE

本文链接：https://blog.csdn.net/m278261/article/details/83943151

版权


    <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>