我有一张图像，我需要根据聚焦的输入来缩放特定点
我使用了属性
transformtransform-origin但是在 Chrome 上，首先完成缩放/缩放，然后传送该点。其实很混乱
知道如何在 Chrome 上实现此功能吗？
我尝试将变换和变换原点放入 CSS 动画中，它似乎能够同时完成这两个操作，因此避免了您在 Chrome 上看到的两步问题（在 Edge 上测试）：
@keyframes focusin {
0% {
transform: scale(1);
transform-origin: 0% 0%;
}
100% {
transform: scale(3);
transform-origin: 25% 75%;
}
}
这是一个片段。我将动画时间设置为 10 秒，这样您就可以看到当焦点位于 input1 上时论文所经历的“旅程”。它看起来很流畅，所以有一点改进，但它在 Edge/Chrome 上并不是“直接”的，我猜（这只是一个猜测）与浏览器动画（或不动画）的方式有关变换原点。
$("#input1").focus(function(e) {
/* $("#image").css({
"transform": "scale(3)",
"transform-origin": "25% 75%"
});*/
document.getElementById('image').style.animationName = 'focusin';
});
$("#input2").focus(function(e) {
$("#image").css({
"transform": "scale(3)",
"transform-origin": "75% 25%"
});
});
$("#input1, #input2").focusout(function(e) {
$("#image").css({
"transform": "scale(1)"
});
});#wrapper {
width: 400px;
height: 267px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
#image {
background-image: url('http://i.imgur.com/n9q7jhm.jpg');
background-size: 400px 267px;
background-position: center;
/* transition: all 1s ease; */
width: 100%;
height: 100%;
/* transform: scale(1); */
position: relative;
left: 0;
top: 0;
animation-duration: 10s;
animation-iteration-count: 1;
animation-name: none;
animation-fill-mode: forwards;
}
@keyframes focusin {
0% {
transform-origin: 0% 0%;
transform: scale(1);
}
100% {
transform-origin: 25% 75%;
transform: scale(3);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">
<div id='wrapper'>
<div id='image'></div>
</div>这在 Chrome 中对我有用。如果它对某人有帮助，那么欢迎。 单击图像，然后拖动以放大它。图像也以全屏显示。
<html>
<head>
<style>
.fullscreen {
position: fixed;
top: 0;
left: 0;
/* bring your own prefixes */
border: 0px solid black;
padding: 0px;
margin: 0px;
background: white;
overflow: hidden;
height: 100%;
width: 100%;
text-align: center;
}
.fullscreen_img {
height: 100vh;
user-drag: none;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<script>
/* Mouse zooming */
zoom_element = null;
zoom_press_start_x = 0;
zoom_press_start_y = 0;
zoom_transform_origin_x = 0;
zoom_transform_origin_y = 0;
function zoom_onclick(e) {
e = e || window.event;
var src = e.target || e.srcElement;
zoom_element = document.getElementById("zoomimage"); //e.target;
zoom_transform_origin_x = e.offsetX;
zoom_transform_origin_y = e.offsetY;
zoom_press_start_x = e.screenX;
zoom_press_start_y = e.screenY;
e.stopPropagation();
}
function zoom_move(e) {
if (zoom_element) {
dx = e.screenX - zoom_press_start_x;
dy = e.screenY - zoom_press_start_y;
length = Math.sqrt(dx * dx + dy * dy);
diagonal = Math.sqrt(zoom_element.naturalWidth * zoom_element.naturalWidth +
zoom_element.naturalHeight * zoom_element.naturalHeight);
max_length = Math.sqrt(zoom_element.width * zoom_element.width +
zoom_element.height * zoom_element.height);
percent_of_max = length / max_length;
scale = (1 + percent_of_max);
scale *= scale * scale * scale * scale * scale;
transform = "scale(" + scale + ") ";
zoom_element.style.transformOrigin = zoom_transform_origin_x + "px " + zoom_transform_origin_y + "px";
zoom_element.style.transform = transform;
}
}
function zoom_onup(e) {
if (zoom_element)
zoom_element.style.transform = "";
zoom_element = null;
}
</script>
</head>
<body>
<div class="fullscreen" onmousemove="zoom_move(event)" onmousedown="zoom_onclick(event);"
onmouseup="zoom_onup(event)" onmouseout="zoom_onup(event)">
<img class="fullscreen_img" id="zoomimage"
src="file:///yourimage.jpg">
</div>
</body>
</html>