当您单击“恢复”时,一些文本会从左侧出现。这是因为我最初给文本留了负边距。
但是 intro_page
的负边距没有效果。
我想要的是:
当我点击
resume_page
时,resume 的文本应该从左边进入(这有效)而intro_page
的文本应该从右边出来(这不起作用' 工作)。intro_page
的负边距似乎不起作用。这是为什么?最初,除了两个链接外,页面应该是空的。当前,
intro_page
页面显示。resume_page
已根据需要正确隐藏。
简而言之,resume_page
的一切都完美无缺。我希望 intro_page
function clicked_resume(OnScreen)
{
var resume = document.getElementById('resume_page');
if(OnScreen == 1)
{
resume.className = '';
clicked_about(0);
}
else if(OnScreen == 0)
{
resume.className = 'unseen';
}
}
function clicked_about(OnScreen)
{
var about = document.getElementById('intro_page');
if(OnScreen == 1)
{
about.className = '';
clicked_resume(0);
}
else if(OnScreen == 0)
{
about.className = 'unseen';
}
}
#intro_page.unseen{
display: block;
margin-right: -200px;
}
#intro_page{
margin-right: 0px;
display: block;
-webkit-transition: margin-right 1.5s ease-in;
transition: margin-right 1.5s ease-in;
}
#resume_page.unseen{
display: block;
margin-left: -600px;
}
#resume_page{
margin-left: 0px;
display: block;
-webkit-transition: margin-left 1.0s ease-in;
transition: margin-left 1.0s ease-in;
}
<h2 class="title_bar">
<ul>
<li><span onclick = "clicked_about(1)">About</span></li>
<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
</h2>
<div id="intro_page" class="unseen">
<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
<figure class="intro_pic1">
<img src="img/award.jpg" alt="Receiving Award" height="50" />
<figcaption>Award 2015</figcaption>
</figure>
</div>
<div id="resume_page" class="unseen">
<p>My resume</p>
</div>
最佳答案
尝试使用 position: relative
和 right
而不是 margin-right
。它更可靠,因为它在定位其他元素时不考虑元素的位置,就像 margin
那样。对于奖励积分,您甚至可以使用 transform:translate
而不是 right
。
function clicked_resume(OnScreen)
{
var resume = document.getElementById('resume_page');
if(OnScreen == 1)
{
resume.className = '';
clicked_about(0);
}
else if(OnScreen == 0)
{
resume.className = 'unseen';
}
}
function clicked_about(OnScreen)
{
var about = document.getElementById('intro_page');
if(OnScreen == 1)
{
about.className = '';
clicked_resume(0);
}
else if(OnScreen == 0)
{
about.className = 'unseen';
}
}
body {
margin: 0;
overflow-x: hidden;
}
#intro_page.unseen{
display: block;
right: -100%;
}
#intro_page{
position: relative;
right: 0px;
display: block;
-webkit-transition: right 1.5s ease-in;
transition: right 1.5s ease-in;
}
#resume_page.unseen{
display: block;
left: -600px;
}
#resume_page{
position: relative;
left: 0px;
display: block;
-webkit-transition: left 1.0s ease-in;
transition: left 1.0s ease-in;
}
<h2 class="title_bar">
<ul>
<li><span onclick = "clicked_about(1)">About</span></li>
<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
</h2>
<div id="intro_page" class="unseen">
<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
<figure class="intro_pic1">
<img src="img/award.jpg" alt="Receiving Award" height="50" />
<figcaption>Award 2015</figcaption>
</figure>
</div>
<div id="resume_page" class="unseen">
<p>My resume</p>
</div>
关于javascript - 为什么负 margin 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31641510/