gpt4 book ai didi

javascript - 中心 div(位置 :absolute) vertically and horizontally to screen view

转载 作者:太空宇宙 更新时间:2023-11-04 12:57:34 24 4
gpt4 key购买 nike

我正在尝试制作一个将文本框覆盖在图像上的用户脚本:它使用固定位置使用 interactjs 的可拖动菜单。菜单有一个按钮,我需要它来创建一个 20px*60px 的 div 并将其显示在屏幕 View 的中心(这样就不会滚动到页面底部并从那里拖动它)。我可以(有点)通过使用来做到这一点:

var div = document.getElementById("inserted_div_2");
div.style.position = 'fixed';
div.style.top = '50%'; //relative to screen
div.style.left = '50%';

从那里我可以将它拖动/调整到我想要在图像上的位置(也使用 interactjs)但是然后,我怎样才能将它更改为 position:absolute 以便它随着内容滚动而在图像上保持相同的位置(例如: 在 img2) 的左上角?像这样的东西:

var posX = div.getPosX(); //relative to page; in %, px or em
var posY = div.getPosY();
// when I change it from fixed to absolute the div goes back to the bottom of the page
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;

HTML 结构看起来像这样:

<body>
...
<div id="content">
...
<img src="/img1.jpg"> // size and number of imgs is variable.
<img src="/img2.jpg"> // are in a strip format.
<img src="/img3.jpg">
...
</div>
...
<div id="overlays">

//eg: div1 was dragged from the center of screen
//into in between img1 and img2
<div id="inserted_div_1">Text</div>

//now I need to do the same for div2,
//dragging it to the top left corner of img2
<div id="inserted_div_2">Text</div>

</div>
</body>

我宁愿不使用 jQuery 或其他库,但如果它太难,那么我会使用它。谢谢!

最佳答案

您可以使用 offsetTopoffsetLeft 获取元素相对于页面的位置(以像素为单位)。

var posX = div.offsetLeft;
var posY = div.offsetTop;
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;

更新

offsetTopoffsetLeft 返回的值不包括应用的 transform:translate 样式。我创建了一个 test case - 它不可拖动,但它向您展示了如何通过添加 offsettranslate 值来计算相对位置:

var div = document.getElementById("inserted_div_2");
var content = document.getElementById("content");

function testpos(){
var ol = div.offsetLeft,
ot = div.offsetTop,
cs = window.getComputedStyle(div, null),
tr = cs.getPropertyValue("-webkit-transform") ||
cs.getPropertyValue("-moz-transform") ||
cs.getPropertyValue("-ms-transform") ||
cs.getPropertyValue("-o-transform") ||
cs.getPropertyValue("transform") ||
false;
//outputs something like 'matrix(1, 0, 0, 1, 80, 90)'
var values = tr.replace(/[^0-9\.\,]/g,'').split(','),//split into array
tx = values[4] || 0,//take the x value (else 0)
ty = values[5] || 0;//take the y value (else 0)
//
content.innerHTML+=("<hr />position: "+div.style.position+"<br />");
content.innerHTML+=("offsetLeft:"+ol+", offsetTop:"+ot+"<br />");
content.innerHTML+=("translate-x:"+tx+", translate-y:"+ty+"<br />");
//so the actual position is the offset + the translate ==
var x = parseInt(ol) + parseInt(tx),
y = parseInt(ot) + parseInt(ty);
content.innerHTML+=("x:"+x+" y:"+y+"<br />");
}

/* TEST */
//1 set to fixed
div.style.position = 'fixed';
testpos();//test position
//2 move using transfor:translate
div.style.transform = 'translate(80px,90px)';
testpos();//test position (note the offset does not include the transform)
/3 set to absolute and get the position
div.style.position = 'absolute';
testpos();

http://jsfiddle.net/u3ay74bs/

关于javascript - 中心 div(位置 :absolute) vertically and horizontally to screen view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25697522/

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