该博客展示了使用HTML和JavaScript实现图片局部放大的功能。通过设置图片的高度、缩放比例等参数，利用JavaScript的事件处理函数，根据鼠标移动位置动态调整局部放大图的显示区域，实现图片局部放大效果。
<html><head><title>emu</title></head><body><BR>原图：<BR><imgsrc="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG"onmousemove="zoom()"id=srcImg><BR>局部放大图：<BR><divstyle="overflow:hidden"><imgid=zoomImg></div><SCRIPTLANGUAGE="JavaScript"><!--zoomImg.src=srcImg.src;srcImg.height=srcImg.height/2;varzoomRate=5;zoomImg.height=srcImg.height*zoomRate;zoomImg.parentNode.style.width=srcImg.width;zoomImg.parentNode.style.height=srcImg.height;functionzoom(){varelm=event.srcElement;h=elm.offsetHeight/zoomRate/2;w=elm.offsetWidth/zoomRate/2;varx=event.x-elm.offsetLeft;x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;zoomImg.style.marginLeft=(w-x)*zoomRate;vary=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>
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
