一個頁面的網站與CSS轉換掃描內容交替從側面

Question

我想創建一個單頁網站的7個導航鏈接。看下面我的小提琴。

第一個導航鏈接位於左上角，現在其文本名爲「home」。其他6個鏈接位於我的「中間」div下面。

我想達到以下效果：

• 主頁總是在着陸
• 顯示的6個環節的「中間」的div下面應該出現無論從屏幕左側或右側僅僅依賴於這個邏輯：第一次轉換從右側進入屏幕，第二次轉換從左側進入屏幕，所有後續轉換到交替側。
• 每個轉換都應該將現有內容從屏幕上移開，而不是重疊它。
• 如果從第1頁到第6頁按順序瀏覽導航鏈接，則每次單擊鏈接時，過渡應交替顯示兩邊。在我當前的小提琴中（雖然工作不正常），頁面1到6將全部從右側進入屏幕，如果您從6向後導航，它們都從左側進入屏幕。這不是我正在尋找的。無論除了左上方的主鏈接，點擊哪個鏈接，我都希望交替顯示雙方。
• 當查看其他鏈接內容時，點擊主頁鏈接時，轉換應該從屏幕頂部出現，並將現有內容從屏幕底部推出。這種轉變應該發生在所有其他divs背後，即。頁眉和頁腳。

如果有人能夠幫助我，我會非常感激，因爲這花了我很多時間和研究。

這裏是我的html：

<div class="main"> 
    <div class="main_header"> 
     <div id="navigation"> 
      <a id="home_link" href="index.php">Home</a> 
     <form action="url" method="post" class="formTop"> 
      <input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" /> 
      <input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" /> 
      <input type="submit" class="submitButton" value="Log in" /> 
     <a href="sign up url">Sign Up</a> 
      </form> 
     </div> <!--navigation--> 
    </div> <!--main_header--> 

    <div class="main_header_bottom"></div> 
    <div id="middle"> 
     <div id="page1_content" class "content">Page 1 Content</div> 
     <div id="page2_content" class "content">Page 2 Content</div> 
     <div id="page3_content" class "content">Page 3 Content</div> 
     <div id="page4_content" class "content">Page 4 Content</div> 
     <div id="page5_content" class "content">Page 5 Content</div> 
     <div id="page6_content" class "content">Page 6 Content</div> 
</div> <!--middle--> 

<div class="sub_footer"> 
<a href="javascript:;" id="page1" class="links">Page 1</a> 

<a href="javascript:;" id="page2" class="links">Page 2</a> 

<a href="javascript:;" id="page3" class="links">Page 3</a> 

<a href="javascript:;" id="page4" class="links">Page 4</a> 

<a href="javascript:;" id="page5" class="links">Page 5</a> 

<a href="javascript:;" id="page6" class="links">Page 6</a> 
</div> <!--sub_footer--> 

    <div class="footer"> 
    <p><a href="contactme.php" target="_blank">| Contact |</a> 
     <br /> 
     <SCRIPT LANGUAGE="JavaScript"> 
      today = new Date(); 
      y0 = today.getFullYear(); 
     </SCRIPT>Copyright &copy; 2012- 
     <SCRIPT LANGUAGE="JavaScript"> 
      document.write(y0); 
     </SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p> 
    </div> <!--footer--> 
</div> <!--main--> 

這裏是我的CSS

body { 
    background-color: #F5F5F5; 
    padding: 0; 
    margin: 0; 
    text-shadow: 1px 1px 1px #CCC; 
    font: 0.7em Arial, sans-serif; 
    line-height: 1.5em; 
    color: #454545; 
    overflow-x: hidden; 
} 
a { 
    color: #0E4D8B; 
    background: inherit; 
} 
a:hover { 
    color: #000; 
    background: inherit; 
} 
a.title { 
    color: #B41A1A; 
    background: #FFF; 
} 
h1 { 
    font: bold 2em Arial, Sans-Serif; 
    letter-spacing: -1px; 
    padding: 16px 0 0 8px; 
    margin: 0; 
} 
h2 { 
    margin: 0; 
    padding: 0; 
    font: normal 1.6em Arial, Sans-Serif; 
    letter-spacing: -1px; 
} 
h1 a { 
    color: #FFF; 
    background: inherit; 
} 
h1 a, h2 a { 
    text-decoration: none; 
} 
h1 a:hover, h2 a:hover { 
    color: #BFE1ED; 
    background: inherit; 
} 
h3 { 
    font: 90% Arial, Sans-Serif; 
    margin: 0 0 10px 0; 
    padding: 0; 
    color: #5f5f5f; 
    background: #FFF; 
} 
p { 
    align:center; 
    margin: 0 0 0px 0; 
    line-height: 1.5em; 
} 
.main { 
    margin: 0; 
    overflow: hidden; 
} 
.main_header { 
    background-color: #6E6D71; 
    height: 75px; 
} 
.main_header_bottom { 
    height: 20px; 
} 
#navigation { 
    height: 75px; 
    margin: 0; 
    padding-left: 100px; 
    box-shadow: inset 0 -20px 20px -20px #000; 
} 
#home_link { 
    float: left; 
    background-image: url(http://wwwdrumtranscriptions/new/home.png); 
    background-repeat: no-repeat; 
    height: 36px; 
    margin-top: 20px; 
    width: 40px; 
} 
.formTop { 
    float: right; 
    margin-top: 15px; 
    margin-right: 75px; 
    height: 45px; 
    padding: 5px 8px 0px; 
} 
.login { 
    border: 1px solid #333; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    box-shadow:inset 0 0 4px ##333; 
    -webkit-box-shadow:inset 0 0 4px #333; 
    -moz-box-shadow:inset 0 0 4px #333; 
    color: #6E6D71; 
    font-size: 12px; 
    background-color: #CCC; 
    padding: 8px; 
} 
#middle { 
    background-color: blue; 
    padding-top: 5px; 
    height: 200px; 
    /* test only */ 
    margin-left: 110%; 
    /* Start position: right outside */ 
    -webkit-transition: margin-left 1s; 
    -moz-transition: margin-left 1s; 
    -o-transition: margin-left 1s; 
    transition: margin-left 1s; 
} 
#middle.page1_inside { 
    margin-left: 0; 
} 
#middle.page2_inside { 
    margin-left: -100%; 
} 
#middle.page3_inside { 
    margin-left: -200%; 
} 
#middle.page4_inside { 
    margin-left: -300%; 
} 
#middle.page5_inside { 
    margin-left: -400%; 
} 
#middle.page6_inside { 
    margin-left: -500%; 
} 
#middle.transition { 
    /* Effects only */ 
    -webkit-transition: margin-left 1s; 
    -moz-transition: margin-left 1s; 
    -o-transition: margin-left 1s; 
    transition: margin-left 1s; 
} 
.content { 
    width: 100%; 
    margin-right: 10px; 
} 
#page1_content { 
    margin-left: 0; 
    background-color: black; 
    color: yellow; 
} 
#page2_content { 
    margin-left: 100%; 
    background-color: yellow; 
    color: black; 
} 
#page3_content { 
    margin-left: 200%; 
    background-color: purple; 
    color: red; 
} 
#page4_content { 
    margin-left: 300%; 
    background-color: green; 
    color: orange; 
} 
#page5_content { 
    margin-left: 400%; 
    background-color: red; 
    color: purple; 
} 
#page6_content { 
    margin-left: 500%; 
    background-color: purple; 
    color: green; 
} 
.sub_footer { 
    text-align: center; 
} 
.links { 
    display: inline-block; 
    padding: 0px 15px 0px 15px; 
} 
.footer { 
    clear: both; 
    text-align: center; 
    color: #808080; 
    background: #f0f0f0; 
    padding: 10px 0 5px 0; 
    border-top: 1px solid #eee; 
} 
.footer p { 
    line-height: 2em; 
} 
.footer a { 
    color: #4F4F4F; 
    background: #f0f0f0; 
    border-bottom: 1px dotted #808080; 
    text-decoration: none; 
} 

，這裏是我的js

$(document).on("click", ".links", function() { 
    $("#middle").removeClass(); /* Remove all classes */ 
    $("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */ 
}); 

這裏是我的Fiddle

感謝

Answer 1

我建議使用.animate（）我有同樣的想法，當我試了一下它的工作完美，如果你還希望有舊推掉使用<ul>一個div裏面有overflow: hidden;然後在李的使用display: inline;和list-style-type: none;

這裏是工作提琴

http://jsfiddle.net/X4URc/3/

Answer 2

這裏有一個如何得到這個工作page1一個例子 - page6：

#middle.page2_inside #page2_content { 
    margin-left: 50%; 
    margin-top: -16px; 
} 
#middle.page3_inside #page3_content { 
    margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3 
    margin-top: -64px; 
} 
#middle.page4_inside #page4_content { 
    margin-left: 75%; // 100% * 3/4 
    margin-top: -112px; 
} 
#middle.page5_inside #page5_content { 
    margin-left: 80%; // 100% * 4/5 
    margin-top: -160px; 
} 
#middle.page6_inside #page6_content { 
    margin-left: 83.33%; // 100% * 5/6 
    margin-top: -208px; 
} 

Demo