Question

我正在尝试创建一个包含7个导航链接的单页网站。请看下面的小提琴。

第一个导航链接位于左上角，现在它的文本名为“home”。其他6个链接位于我的“中间”div下面。

我试图达到以下效果：

登陆时始终显示主页
“中间”div下方的6个链接应该从屏幕左侧或右侧出现，只需依据此逻辑：第一个转换从右侧进入屏幕，第二个转换从左侧进入屏幕，所有后续转换交替双方。
每次转换都应将现有内容从屏幕上移开而不是重叠。
如果从第1页到第6页按顺序浏览导航链接，则每次单击链接时，转换应交替进行。在我当前的小提琴中（虽然不能正常工作），第1页到第6页都将从右侧进入屏幕，如果您从6向后导航，则它们都从左侧进入屏幕。这不是我想要的。无论点击哪个链接，除了左上角的主页链接外，我都希望交替使用。
在查看其他链接内容时单击主页链接时，应从屏幕顶部显示转换，并将现有内容从屏幕底部推出。这种转变应该发生在所有其他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;
}

这是我的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>在overflow: hidden;的div中，它也能很好地工作然后在li上使用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

一个页面的网站，css过渡到交替的侧面扫描内容

2 个答案: