为啥将“margin:0 auto”添加到滑块菜单会破坏它?
Posted
技术标签:
【中文标题】为啥将“margin:0 auto”添加到滑块菜单会破坏它?【英文标题】:Why is adding 'margin: 0 auto' to a slider menu breaks it?为什么将“margin:0 auto”添加到滑块菜单会破坏它? 【发布时间】:2013-03-08 15:56:11 【问题描述】:我正在创建一个滑块菜单,一切正常,直到我尝试使用 margin: 0 auto
使其居中;
我强烈认为问题出在相对定位和我正在使用的 jQuery .animate
函数上。所以我正在寻找另一种方法来达到同样的效果!
这里有一个问题
http://jsfiddle.net/jwsh7/(图片无法包含,所以我在所有内容上都加了边框,问题出在绿色边框的 div 上)
删除 margin: 0 auto;
以查看它是否按我想要的方式工作。
body
margin: 0;
padding: 0;
#content
width: 625px;
border: 1px solid red;
#content div.slider
position: relative;
width: 50px;
height: 100px;
background-image: url(images/rond.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
top: 110px;
left: 25px;
border: 1px solid red;
.menu
color: #00C;
font-size: 18px;
font-family: "OnomatoShark!";
position: absolute;
width: 50px;
height: 100px;
background-image: url(images/ligne_barre.png);
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
border: 1px solid red;
.menu p
width: 150px;
float: left;
position: absolute;
top: -25px;
left: 10px;
.menu p:hover
width: 150px;
float: left;
position: absolute;
top: -25px;
color: red;
#barre
position: relative;
width: 600px;
height: 28px;
background-image: url(images/ligne.png);
background-position: center;
list-style-type: none;
top: 25px;
padding: 0;
border: 1px solid red;
#sousMenu1
margin: 0;
padding: 0;
margin-top: 90px;
background-image: url(images/sousmenu.png);
background-position: left;
background-repeat: no-repeat;
overflow: hidden;
float: left;
height: 150px;
display: none;
text-align: left;
#sousMenu2
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 10px;
background-image: url(images/sousmenu.png);
background-position: left;
background-repeat: no-repeat;
overflow: hidden;
float: left;
height: 150px;
display: none;
#sousMenu3
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 10px;
background-image: url(images/sousmenu.png);
background-position: left;
background-repeat: no-repeat;
height: 150px;
width: 250px;
overflow: hidden;
float: left;
display: none;
#sousMenu4
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 10px;
background-image: url(images/sousmenu.png);
background-position: left;
background-repeat: no-repeat;
height: 150px;
overflow: hidden;
float: left;
display: none;
ol
text-align: left;
padding-top: 20px;
ol a
text-decoration: none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class='slider'></div>
<ul id="barre">
<li class="menu" id="option1">
<p>Accueil</p>
</li>
<li class="menu" id="option2">
<p>Animation</p>
<ul class="sous-menu" id="sousMenu1">
<ol><a href="#">Histoire</a></ol>
<ol><a href="http://google.com">Avancées technologiques</a></ol>
</ul>
</li>
<li class="menu" id="option3">
<p>Techniques</p>
<ul class="sous-menu" id="sousMenu2">
<ol><a href="#">Rotoscopie</a></ol>
<ol><a href="#">Trait</a></ol>
</ul>
</li>
<li class="menu" id="option4">
<p>Fondements</p>
<ul class="sous-menu" id="sousMenu3">
<ol><a href="#">Processus de production</a></ol>
<ol><a href="#">Interpolation</a></ol>
<ol><a href="#">Guide de mouvement</a></ol>
</ul>
</li>
<li class="menu" id="option5">
<p>Principes</p>
</li>
<li class="menu" id="option6">
<p>Effets Avancés</p>
<ul class="sous-menu" id="sousMenu4">
<ol><a href="#">Rotation</a></ol>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
function sousmenuCache()
$("#sousMenu1").hide("fast");
$("#sousMenu2").hide("fast");
$("#sousMenu3").hide("fast");
$("#sousMenu4").hide("fast");
$("#option1").click(function()
sousmenuCache();
);
$("#option2").click(function()
sousmenuCache();
$("#sousMenu1").delay(300).show("slow");
);
$("#option3").click(function()
sousmenuCache();
$("#sousMenu2").delay(300).show("slow");
);
$("#option4").click(function()
sousmenuCache();
$("#sousMenu3").delay(300).show("slow");
);
$("#option5").click(function()
sousmenuCache();
);
$("#option6").click(function()
sousmenuCache();
$("#sousMenu4").delay(300).show("slow");
);
// Centrer la barre dans le container
var middleOption = ($("#barre").height() - ($("#option1").height() - $("#barre").height()));
// Création des options du menu
var leftOption = -70;
$("#content #barre li").each(function()
$(this).css('top', '' + middleOption + 'px');
$(this).css('left', '' + (leftOption + 90) + 'px');
leftOption += 90;
);
$(function()
$(".menu").click(function()
var middleSlider = (($(".slider").width() - $("#option1").width()) * 0.5);
$(".slider").animate(
left: ($(this).offset().left - middleSlider)
);
);
);
TweenMax.set("#content",
x: 300
);
);
</script>
【问题讨论】:
【参考方案1】:问题是您同时使用边距和位置来定位幻灯片,它们是冲突的。要使其死点,请使用 -0.5 * 滑块宽度的 margin-left,然后 left:50%;
#content div.slider
position:relative;
width: 50px;
height: 100px;
background-image:url(images/rond.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
z-index: 2;
top: 110px;
left: 50%;
border: 1px solid green;
margin-left:-25px;
【讨论】:
非常感谢!说到 js 定位,我太傻了! 我们都必须从某个地方开始。我的一般方法是使用边距和填充,当它们失败时,删除它们并使用位置。盒子模型!【参考方案2】:当您将#content
居中时,您必须在制作动画时考虑额外的偏移量。很难解释,看看这个更新的小提琴:
http://jsfiddle.net/jwsh7/1/
var fix = ($(document).width() - $('#content').width()) * .5; // <-- need to subtract this
$(".menu").click(function ()
var middleSlider = ($(".slider").width() - $("#option1").width()) * 0.5;
$(".slider").animate(
left: ($(this).offset().left - middleSlider - fix)
);
);
【讨论】:
谢谢 x 1000 我花了整整一个下午试图解决这个问题。 是的,有时我们只需要新鲜的眼光。以上是关于为啥将“margin:0 auto”添加到滑块菜单会破坏它?的主要内容,如果未能解决你的问题,请参考以下文章