我在玩一个主意,我想模仿主要容器元素向左或向右移动的 facebook 移动应用程序。但是,我已经尝试了几种方法,我想移动的元素似乎调整了大小而不是移动了,我不确定是什么或为什么这样做而不是按照我期望的方式移动。
注意我已经尝试过将主元素作为固定元素和绝对元素。我也尝试过在 javascript 中只使用“左”或“右”而不是“marginLeft”或“marginRight”。
所以我想知道我做错了什么?
CSS:
html, body{margin:0;padding:0;width:100%;height:100%;}
#wrap_main{background-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;}
#wrap_bottom_left{background-color:aqua;width:50%;float:left;}
#wrap_bottom_right{background-color:green;width:50%;float:right;}
javascript:
var isMenuOpen = false;
$(document).ready(function()
{
//code
});
$('#menu_left_trigger').click(function(e)
{
e.preventDefault();
var $mainEle = $('#wrap_main');
if(isMenuOpen == false)
{
isMenuOpen = true;
$mainEle.animate({marginLeft:"10%"}, 1000);
}
else
{
isMenuOpen = false;
$mainEle.animate({marginLeft:"0"}, 1000);
}
});
$('#menu_right_trigger').click(function(e)
{
e.preventDefault();
var $mainEle = $('#wrap_main');
if(isMenuOpen == false)
{
isMenuOpen = true;
$mainEle.animate({marginRight:"10%"}, 1000);
}
else
{
isMenuOpen = false;
$mainEle.animate({marginRight:"0"}, 1000);
}
});
html:
<div id="wrap_main">
<a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
<a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
</div>
<div id="wrap_bottom_left">
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
<div id="wrap_bottom_right">
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
最佳答案
嗯,好吧。我刚刚解决了我自己的问题。所以我会在这里为那些尝试类似的人分解它。
首先是逻辑。我的内容包含“主”元素(如果您将其称为“主”元素)是绝对/固定位置。这基本上将它从 DOM 中分离出来。这意味着基于百分比的高度和宽度不起作用。因此,要创建固定/绝对的全高、全宽元素的效果。我需要告诉元素属性 left:
, right:
, top:
, bottom:
(css)全部设置为零,这样 4 个点将在所有边上都触及“0”,基本上将其拉伸(stretch)以使其适合。
所以。那是我的问题。通常移动一个固定元素或绝对定位元素,你会完全按照我的尝试去做。然而,在几乎所有的原因中,当你设置绝对或固定时,你很可能只设置左上或右上,或者分别设置相同但有底部。
因此,由于元素的样式设置为保留在所有四个点上,当我想在任一方向移动元素 x%
或这么多像素时。我必须对两个方向进行补偿,所以如果我想向右移动元素,我需要执行 left:10%;right-10%
来补偿两侧的移动。
最终我最终做的是在整个元素移动时在任一方向上进行更改,而不是无意中调整大小,因为我只告诉一侧移动而不是另一侧移动
希望这对 future 的玩家有意义
关于javascript - jQuery 将固定或绝对定位的元素向左或向右移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13783106/