用javascript放大图片局部

emu

于 2005-07-13 18:01:00 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html div

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/emu/article/details/424289

该博客展示了使用HTML和JavaScript实现图片局部放大的代码。通过设置图片的高度、缩放比例等参数，利用JavaScript的事件处理函数，在鼠标移动时动态调整放大图的位置，从而实现图片局部放大的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<title>emu</title>

</head>

<body>

<BR>

原图：<BR>

<img src="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG" onmousemove="zoom()" id=srcImg>

<BR>

局部放大图：<BR>

<div style="overflow:hidden"><img id=zoomImg></div>

<SCRIPT LANGUAGE="JavaScript">

<!--

zoomImg.src = srcImg.src;

srcImg.height = srcImg.height/2;

var zoomRate = 5;

zoomImg.height = srcImg.height*zoomRate;

zoomImg.parentNode.style.width = srcImg.width;

zoomImg.parentNode.style.height = srcImg.height;

function zoom(){

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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。