gpt4 book ai didi

javascript - 如何放大图像并将其居中?

转载 作者:可可西里 更新时间:2023-11-01 02:33:02 25 4
gpt4 key购买 nike

知道如何使用 javascriptcss 在特定点放大图像吗?我正在使用基于 webkit 的浏览器。

我可以通过指定缩放属性来缩放,比如 `elem.style.zoom="150%",主要问题是我无法将图像居中放置在我想要缩放的位置。我可以使用 mouseclick 获得我想要缩放的点。

最佳答案

正如我在上面的评论中所说,我会避免使用 zoom css 属性并只使用 javascript。我设法将以下代码放在一起,第一次点击时效果很好,实际上它所需要的只是更动态一点(甚至是一个词?)。

        <html>
<head>
<script type="text/javascript">
function resizeImg (img)
{
var resize = 150; // resize amount in percentage
var origH = 200; // original image height
var origW = 200; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize / 100) + "px";
var newW = origW * (resize / 100) + "px";

// Set the new width and height
img.style.height = newH;
img.style.width = newW;

var c = img.parentNode;

// Work out the new center
c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
c.scrollTop = (mouseY * (resize / 100)) - (newH / 2) / 2;
}
</script>
<style type="text/css">
#Container {
position:relative;
width:200px;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Container">
<img alt="Click to zoom" onclick="resizeImg(this)"
src="https://picsum.photos/200" />
</div>
</body>
</html>

它适用于 Google Chrome 和 IE,不确定其他人。正如我所说,希望它能为您指明正确的方向。

关于javascript - 如何放大图像并将其居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2028557/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com