用javascript放大图片局部

<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
<BR>
<img src="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG" οnmοusemοve="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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现图片局部放大效果,可以使用JavaScript和CSS来实现。下面是一种实现方式: 1. HTML代码 首先,需要在HTML代码中添加图片元素和一个容器元素,用于显示放大后的局部图像。 ```html <img src="image.jpg" id="image" /> <div id="container"></div> ``` 2. CSS样式 在CSS中,需要设置容器元素的样式,使其覆盖在图片上方,并且设置该元素的宽度和高度为放大后的局部图像的大小。 ```css #container { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-repeat: no-repeat; background-size: 400px 400px; display: none; } ``` 3. JavaScript代码 接下来,需要使用JavaScript代码来实现图片局部放大的效果。具体实现步骤如下: - 获取图片元素和容器元素。 - 监听图片元素的鼠标移动事件。 - 在事件处理程序中,计算当前鼠标位置所对应的局部图像的位置。 - 设置容器元素的背景图像和位置,并显示容器元素。 ```javascript var image = document.getElementById('image'); var container = document.getElementById('container'); image.addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var bgPosX = -x * 2; var bgPosY = -y * 2; container.style.backgroundImage = 'url(' + this.src + ')'; container.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px'; container.style.display = 'block'; }); image.addEventListener('mouseout', function () { container.style.display = 'none'; }); ``` 在上面的代码中,我们使用了鼠标移动事件和鼠标移出事件来控制容器元素的显示和隐藏。在鼠标移动事件中,我们计算当前鼠标位置所对应的局部图像的位置,并将其设置为容器元素的背景位置。最后,我们显示容器元素。在鼠标移出事件中,我们隐藏容器元素。 这样,就可以实现图片局部放大效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值