sat*_*sat 10 javascript css zoom
任何想法如何在特定点图像中使用放大javascript,css？我正在使用webkit基于浏览器.
我可以通过指定缩放属性进行缩放,例如`elem.style.zoom ="150%",主要问题是我无法将图像居中放在我想要缩放的位置.我可以使用鼠标点击我想要缩放的点.
And*_*y E 17
正如我在上面的评论中所说,我会避免缩放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>它适用于谷歌浏览器和IE浏览器,不确定其他人.就像我说希望它会指向正确的方向.