个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我用纯 js 创建了一个放大镜。我发现需要相对于其父元素转换 div 的鼠标位置时，在计算覆盖放大镜 div 的顶部时，offsetTop 的工作方式与 offsetLeft 不同。调整顶部应该后，我需要减去整个容器 div 的 offsetHeight。
相关代码中的行是这样的:
magnifier.style.top = yPosition - container.offsetHeight + "px";
为什么我需要减去 container.offsetHeight？
我知道我读过一些关于此的内容，但找不到。
免责声明 此代码有效。我这样问是为了让我(和后面的人)能够理解盒子模型是如何工作的。
我知道有一些跨浏览器更可靠的 jQuery 替代品。我喜欢自己编写代码，这样我就可以了解它是如何工作的。如果您看到与现代浏览器不兼容的内容，请随时发表评论。
最后，对于任何使用它的人，我从该示例中删除了代码以针对转换进行调整。例如，如果包装器有一个 transform: translate(-50%, 0); 来水平居中包装器，您将需要添加翻译的结果量(翻译到包装器的左边position) 回到计算中。
我创建了一个 jsfiddle here .如果有人感兴趣，我会在 Fiddle 中留下更多关于方法论的评论。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../css/ms.js"></script>
<style type="text/css">
/********************/
body {
background-color: #FFF;
margin-left: 30px;
margin-top: 10px;
}
.wrapper {
position: absolute;
left: 100px;
}
#container {
width: 527px;
height: 450px;
border: 5px black solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#image {
width: 527px;
height: 450px;
}
#magnifier {
width: 250px;
height: 250px;
overflow:hidden;
position:relative;
z-index: 1000;
border: solid 1px;
}
#magnifier img {
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div id="container">
<img id="image" src="../docs/grade-2/jpg/g2-bb-saints-francis.jpg">
<div id="magnifier" class="magnifier">
<img id="imagecopy">
</div>
<br>
</div>
<input type="button" value="Zoom" onClick="initmagnifier('magnifier', 'image', 'imagecopy');"><br>
</div>
<script>
function initmagnifier(magnifier, image, imagecopy){
var magnifier = document.getElementById("magnifier");
var container = document.getElementById("container");
var wrapper = document.getElementById("wrapper");
var img = document.getElementById(image);
var imgcopy = document.getElementById(imagecopy);
var zoom = 2;
container.addEventListener("mousemove",
function(e){
movemagnifier(e, img, imgcopy, magnifier, container, wrapper, zoom)
}, false);
var src = img.src;
imgcopy.src = src;
var src2 = imgcopy.src;
imgcopy.height = img.height * zoom;
imgcopy.width = img.width * zoom ;
}
function movemagnifier(e, img, imgcopy, magnifier, container, wrapper, zoom) {
// to get the left & top of the magnifier
// position needs to be adjusted for WRAPPER & CONTAINER top and left
// gets the top and left of the container
var containerPosition = getPosition(e.currentTarget);
// adjust out the CONTAINER's top / left
// Then takes 1/2 the hight of the MAGNIFIER and subtracts it from the MOUSE position to center MAGNIFIER around the MOUSE cursor
var xPosition = e.clientX - containerPosition.x - (magnifier.clientWidth / 2);
var yPosition = e.clientY - containerPosition.y - (magnifier.clientHeight / 2);
magnifier.style.left = xPosition + "px";
magnifier.style.top = yPosition - container.offsetHeight + "px";
// Adjust for zoom
// adjust the MAGNIFIER's top/left at an equal pace to the zoom amount
var yTravel = (e.clientY - containerPosition.y ) * (zoom - 1);
var yimgPosition = -(yPosition - container.clientTop + yTravel);
imgcopy.style.top = yimgPosition + "px";
var xTravel = (e.clientX - containerPosition.x) * (zoom - 1); // * 1.5
var ximgPosition = -(xPosition + xTravel);
imgcopy.style.left = ximgPosition + "px";
console.log('****');
console.log(e.clientY); // MOUSE POSTION
console.log(containerPosition.y);
console.log(wrapper.offsetTop);
console.log(wrapper.clientHeight);
console.log(container.offsetTop);
console.log(container.clientHeight);
console.log(yPosition);
console.log(container.offsetHeight);
console.log(magnifier.style.top);
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
// element is the CONTAINER
// This calculates the postion of the element (CONTAINER) TOP & LEFT relative to ALL parents
while (element) {
// if transform: translate in place for x and y,
// add it back as it skews the offsetLeft offsetTop values by the translate amount
xPosition += ((element.offsetLeft) - element.scrollLeft);
yPosition += ((element.offsetTop) - element.scrollTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</body>
</html>
最佳答案
我花了比我愿意承认的时间更长的时间，但我找到了原因。在你的 fiddle 中，你定位 #magnifier - 相对元素，这意味着您必须将其从容器内图像下方的“自然”位置移开。
因此，您必须通过拉动 #magnifier 来补偿这一点。到容器的顶部/左侧位置，左侧位置已经匹配，但是 #magnifier 的“自然”顶部位置是容器的完整高度，正如您从 #container 的顶部/左侧位置计算的那样, 你需要减去 #container高度。
一个简单的解决方法是添加 position: relative到 #container并更改 position: relative在 #magnifier 上至 position: absolute .
这将为您提供 #magnifier 的预期坐标系作为top: 0; left: 0因为绝对定位元素是其相对父元素(第一个定位父元素，在本例中为 #container )的左上角。
a working example无需减去 container.offsetHeight .
当我在做的时候，你可能想看看 Element.getBoundingClientRect 函数，因为您可以在一次调用中获得确定位置所需的所有信息。
关于javascript - 计算子 div 顶部位置 - 为什么需要减去父 offsetHeight？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35514537/
25
4
0
我关注了这个:How can I enable Flutter/Dart language experiments? 但是，传播运算符仍然对我不起作用。 最佳答案 您需要从终端运行 flutter u
在各种场合我都希望收到一个 Rx Replay 缓冲传入通知的运算符，在第一次订阅时同步重放其缓冲区，然后停止缓冲。此轻量级 Replay运营商应该只能为一个用户提供服务。可以找到此类运算符的一个用例
var items = []; var index = 0; var value = items[index]; // returns invalid value error, understood!
我想在文本中找到笔划的方向。 Sobel 算子如何用于此目的？ 这张图显示的是dp，也就是梯度方向。我想知道如何应用 Sobel 运算符找到要选择的像素，从 p 到 q，沿着路径 sp，到找到边缘上的
我正在尝试在水平和垂直方向上实现 sobel 运算符。但不知何故我得到了反向输出。我在下面附上的代码。对于水平蒙版 char mask [3][3]= {{-1,-2,-1},{0,0,0},{1,
我在使用 Sobel 算子进行边缘检测时遇到问题:它会产生太多假边缘，效果如下图所示。我正在使用 3x3 sobel 运算符 - 首先提取垂直然后水平，最终输出是每个滤波器输出的幅度。合成图像的边
我很难理解 &^ and &^= operators 是什么在围棋中的意思。我无法在文档(说明操作符有点清晰，但对我帮助不大)或试验中找到答案。 特别是，我想知道 Python 中是否有等效项。 最佳
我目前正在从包含体素的 MRI 数据量中去除不均匀性。我想在这些体积上应用 sobel 算子来找到梯度。我熟悉 2d sobel mask 和 2d 图像的邻域。 索贝尔面具: 1 2 1 0 0 0
Img 是我输入的 RGB 图像 import cv2 import numpy as np img = cv2.imread("Lenna.png") black = cv2.cvtColor(im
我正在用 C#.net 做人脸检测项目，在某些情况下，我从 sobel 获得了更好的结果，而在其他一些情况下，我从 canny 获得了更好的结果。但实际上哪个更好？ 最佳答案 Canny 建立在 So
我是一名优秀的程序员,十分优秀！