Fatal编程技术网
  • javascript/
  • javascript-垂直和水平向屏幕视图的中心div（位置：绝对）

javascript-垂直和水平向屏幕视图的中心div（位置：绝对）

javascript css

javascript-垂直和水平向屏幕视图的中心div（位置：绝对）,javascript,css,Javascript,Css,我正在尝试制作一个将文本框覆盖在图像上的UserScript：它使用一个可拖动的菜单，使用具有固定位置的interactjs。菜单有一个按钮，我需要它来创建一个20px*60px的div，并显示在屏幕视图的中心（这样就不会滚动到页面底部并从那里拖动它）。我可以（稍微）通过使用： var div = document.getElementById("inserted_div_2"); div.style.position = 'fixed'; div.style.top = '50%'; //re

我正在尝试制作一个将文本框覆盖在图像上的UserScript：它使用一个可拖动的菜单，使用具有固定位置的interactjs。菜单有一个按钮，我需要它来创建一个20px*60px的div，并显示在屏幕视图的中心（这样就不会滚动到页面底部并从那里拖动它）。我可以（稍微）通过使用：

var div = document.getElementById("inserted_div_2");
div.style.position = 'fixed';
div.style.top = '50%'; //relative to screen
div.style.left = '50%';
从那里，我可以将其拖动/调整大小到图像上方我想要的位置（也可以使用InteractiveJS），但是，我如何将其更改为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>


...
...
//IMG的大小和数量是可变的。
//都是条状的。
...
...
//div1被从屏幕中央拖了出来
//进入img1和img2之间
正文
//现在我也要为第二季做同样的事情，
//将其拖动到img2的左上角
正文
我不希望使用jQuery或其他库，但如果太难，我会使用它。
谢谢

您可以在垂直和水平方向上使用css进行中心div

比如说

#content{
     position:absolute;
     width:100px;
     height:100px;
     left:50%;
     top:50%;
     margin-left:-50px; /*half width*/
     margin-top:-50px; /*half height*/
}

<div id='content'>
     ...
</div>

#内容{
位置：绝对位置；
宽度：100px；
高度：100px；
左：50%；
最高：50%；
左边距：-50px；/*半宽*/
边缘顶部：-50px；/*半高*/
}
...
如果宽度等于100px，边距左侧等于-50px 如果宽度等于200px，边距左侧等于-100px 等等

边距左半宽度 和
页边距上半高度

您可以使用
offsetTop
和
offsetLeft
获取元素相对于页面的位置（在px中）

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

offsetTop
和
offsetLeft
返回的值不包括应用的
transform:translate
样式。我创建了一个-它不是可拖动的，但它向您展示了如何通过添加
偏移量
和
平移
值来计算相对位置：

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();

var div=document.getElementById（“inserted_div_2”）；
var content=document.getElementById（“内容”）；
函数testpos（）{
var ol=div.offsetLeft，
ot=分区偏移量，
cs=window.getComputedStyle（div，null），
tr=cs.getPropertyValue（“-webkit transform”）||
cs.getPropertyValue（“-moz转换”）||
cs.getPropertyValue（“-ms转换”）||
cs.getPropertyValue（“-o-transform”）||
cs.getPropertyValue（“转换”）||
虚假的；
//输出类似“矩阵（1,0,0,1,80,90）”的内容
var values=tr.replace（/[^0-9\.\，]/g'，）.split（'，'），//拆分为数组
tx=值[4]| | 0，//取x值（否则为0）
ty=值[5]| | 0；//取y值（否则为0）
//
content.innerHTML+=（“
位置：”+div.style.position+“
”）；
content.innerHTML+=（“offsetLeft:+ol+”，offsetTop:+ot+”
）；
content.innerHTML+=（“translate-x:+tx+”，translate-y:+ty+”
）；
//所以实际位置是偏移+平移==
var x=parseInt（ol）+parseInt（tx），
y=parseInt（ot）+parseInt（ty）；
content.innerHTML+=（“x:+x+“y:+y+”
）；
}
/*试验*/
//1设置为固定
div.style.position='fixed'；
testpos（）//测试位置
//2使用transfer移动：translate
div.style.transform='translate（80px，90px）'；
testpos（）//测试位置（注意偏移不包括变换）
/3设置为绝对并获得位置
div.style.position='绝对'；
testpos（）；

尝试使用
offsetLeft
但我认为，因为我正在使用css translate拖动，所以值不会更改。如果我使用
getBoundingClientRect
则值仅在拖动（相对于屏幕）时更改，而不是在滚动（相对于页面）时更改。您可以获取
transform:translate
值并将其添加到
偏移量中。看看我更新的答案。你描述它的方式，听起来好像你真的想要它和内容一起滚动。现在是什么？@DanMan是的，你说得对。对不起，英语不是我的主要语言，但是我会修改这个问题。