管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用javascript制作放大镜放大图片

<html>  
<head>  
<title>emu</title>  
</head>  
<body>

原图：
  
<img src=http://www.web745.com/image/logo.gif width="280" height="150" id=srcImg onmousemove="zoom()">

局部放大图：
  
<div style="overflow:hidden"><img id=zoomImg></div>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%20%0D%0A%3C!--%20%20%0D%0AzoomImg.src%20%3D%20srcImg.src%3B%20%20%0D%0AsrcImg.height%20%3D%20srcImg.height%2F2%3B%20%20%0D%0Avar%20zoomRate%20%3D%205%3B%20%2F%2F%E6%94%BE%E5%A4%A7%E5%80%8D%E6%95%B0%20%20%0D%0AzoomImg.height%20%3D%20srcImg.height*zoomRate%3B%20%20%0D%0AzoomImg.parentNode.style.width%20%3D%20srcImg.width%3B%20%20%0D%0AzoomImg.parentNode.style.height%20%3D%20srcImg.height%3B%20%20%0D%0Afunction%20zoom()%7B%20%20%0D%0Avar%20elm%20%3D%20event.srcElement%3B%20%20%0D%0Ah%20%3D%20elm.offsetHeight%2FzoomRate%2F2%3B%20%20%0D%0Aw%20%3D%20elm.offsetWidth%2FzoomRate%2F2%3B%20%20%0D%0Avar%20x%20%3D%20event.x-elm.offsetLeft%3B%20%20%0D%0Ax%3Dx%3C(elm.offsetWidth-w)%3Fx%3Cw%3Fw%3Ax%3Aelm.offsetWidth-w%3B%20%20%0D%0AzoomImg.style.marginLeft%3D(w-x)*zoomRate%3B%20%20%0D%0Avar%20y%20%3D%20event.y-elm.offsetTop%3B%20%20%0D%0Ay%3Dy%3C(elm.offsetHeight-h)%3Fy%3Ch%3Fh%3Ay%3Aelm.offsetHeight-h%3B%20%20%0D%0AzoomImg.style.marginTop%3D(h-y)*zoomRate%3B%20%20%0D%0A%7D%20%20%0D%0A%2F%2F--%3E%20%20%0D%0A%3C%2FSCRIPT%3E">  
</body>  
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程