javascript - 带有 CSS 过渡的一页网站，可以从交替的两边扫描内容

Question

我正在尝试创建一个包含 7 个导航链接的单页网站。请参阅下面的 fiddle 。

第一个导航链接位于左上角，目前它的文本名为“主页”。其他 6 个链接位于我的“中间”div 下方。

我正在尝试实现以下效果:

• 首页始终在登陆时显示
• “中间”div 下面的 6 个链接应该从屏幕的左侧或右侧显示，具体取决于以下逻辑:第一个转换从右侧进入屏幕，第二个转换从左侧进入屏幕，所有后续转换交替两侧。
• 每个过渡都应将现有内容推离屏幕，而不是与其重叠。
• 如果按从第 1 页到第 6 页的顺序探索导航链接，则每次单击链接时，过渡应该交替进行。在我当前的 fiddle 中(尽管工作不正常)，第 1 到第 6 页都将从右侧进入屏幕，如果您从第 6 页向后导航到第 1 页，它们都会从左侧进入屏幕。这不是我要找的。除了左上角的主页链接外，无论单击哪个链接，我都希望两侧交替。
• 当查看另一个链接内容时单击主页链接时，过渡应该从屏幕顶部出现，并将现有内容推离屏幕底部。这种转变应该发生在所有其他 div 之后。页眉和页脚。

如果有人能够帮助我，我将非常感激，因为这花了我很多时间和研究。

这是我的 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;
}

这是我的代码

$(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>在带有 overflow: hidden; 的 div 中然后在李的使用display: inline;和 list-style-type: none;

这是一个工作 fiddle

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