Question

我已经使用jQuery animate()函数创建了一个滑动（S）窗口。即它左右滑动。

$.animate({width:'toggle', opacity:'toggle'},2000,'swing',function(){
    // ...
})

打开时使用以下CSS。

position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;

我面临的问题是：在不同宽度的屏幕上，窗口从不同的位置开始。我应该把它显示在另一个窗口（A）附近。我的笔记本电脑上工作正常。在客户端，它与窗口A的一半重叠。我认为这是由position:absolute;引起的，但我不知道如何解决它。请帮忙！谢谢！

Answer 1

不同尺寸的屏幕具有不同的分辨率。因此，在您的计算机上，100px可能是您屏幕的中心，但对于其他人，它可能不是。使用％而不是px可能更适合您。

Answer 2

您可以使用$("body").height();和$("body").scrollTop()来获取客户端窗口的高度和要查看的页面位置，在代码中您可以使用幻灯片高度。降低你的滑动高度。您现在可以在页面中心显示幻灯片。像这样：

var top = $("body").scrollTop() + ((parseInt($("body").height()) - slideHeight) / 2);

Answer 3

您可以尝试

float:right;

将该对象放在窗口旁边。你需要在这里发布完整的代码，告诉我分区标签的位置。否则，您可以在W3Schools

搜索浮动属性

Answer 4

如果应用动画或position：absolute属性的div具有父div，则应用position：relative。

<div class="wrapper">
  <div class="slider"></div>
</div>

css:
.wrapper{ position:relative;}
.slider{
position:absolute;
height: 496px;
width: 694px;
left:36px;
top:124px;
}

Answer 5

非常感谢你们的答案！非常感激。

@ ali-youhannaei的回答给了我一个使用以下代码的想法：

var pos = jQuery("#div_a").offset(); // Window A's position
var x = pos.left + jQuery("#div_a").width(); // Window S's position

为{S}}设置left:x;，用于Window S.这将有效。

div {position：absolute}在不同宽度的屏幕上呈现不同的位置

5 个答案: