问题 为什么负保证金不起作用？

当您单击“恢复”时，一些文本从左侧进入。这是因为我最初对文本给出了负余量。

但负利润率 intro_page 没有效果。

我想要的是：

当我点击 resume_page，简历的文本应该从左边（这个作品）和文本 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>

1250

2017-07-26 20:17

起源

答案:

尝试使用 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>

2017-07-26 21:26

谢谢。你能否解决问题2.的负面影响 intro_page 应该让它最初隐藏（就像 resume_page 是隐藏的）。然而， about_page 被看见了。 - Matt

@Matt答案已编辑，问题已解决。 - Maximillian Laumeister

不知何故，我仍然看到 intro_page 每次。基本上， intro_page 永远可见;它只是向右移动了一点。有没有什么方法可以隐藏它，直到点击“关于”？ - Matt

@Matt你想让它像简历一样从左边滑入吗？如果是这样，而不是使用 right，使用否定 left 价值和过渡 left。或者，使用否定 transform: translate 价值和过渡 transform。对不起这里的迭代过程，我只是不完全确定你想要完成什么。 - Maximillian Laumeister

@Matt感谢您的澄清。在这种情况下，我会给你的包含元素（在这种情况下是身体） overflow-x 的价值 hidden，和你的 intro_page 一个 right 的价值 -100%。查看更新的示例。 - Maximillian Laumeister

答案:

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>

2017-07-26 21:26

谢谢。你能否解决问题2.的负面影响 intro_page 应该让它最初隐藏（就像 resume_page 是隐藏的）。然而， about_page 被看见了。 - Matt

@Matt答案已编辑，问题已解决。 - Maximillian Laumeister

不知何故，我仍然看到 intro_page 每次。基本上， intro_page 永远可见;它只是向右移动了一点。有没有什么方法可以隐藏它，直到点击“关于”？ - Matt

原因是在CSS中元素是从左到右铺设的，margin-right永远不会按你的意愿工作。

只是像这样修改你的CSS，它将作为一个魅力。

 body {
   overflow:hidden
}

#intro_page.unseen{
    transform: translateX(120%);
    transition: transform 1s ease-in;
}
#intro_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

#resume_page.unseen{
    transform: translateX(-100%);
    transition: transform 1s ease-in;
}

#resume_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

提示：为了在动画中获得更好的表现，请始终使用翻译而不是位置，边距，宽度......

http://jsfiddle.net/wgsy6ufx/1/

2017-07-26 21:54

你可以读一读本指南，左右负边距的行为不一样：负面 margin-left 拉扯 病急乱投医 左边的元素，而负面的元素 margin-right 拉扯 相邻的 元素朝着风格元素。它不会移动样式元素本身。

如果要实现输出，请使用 position: relative 和 left 在最右边定位你的介绍div的属性：见这个小提琴。

2017-07-26 21:28

问题为什么负保证金不起作用？

答案:

答案:

热门问题

问题 为什么负保证金不起作用？

答案:

答案:

热门问题

问题为什么负保证金不起作用？