0

我正在制作一个 Windows 8 横向滚动样式的网页设计。我需要帮助编写内容在矩形中出现的方式。内容应逐个向下滚动，并在标题之间稍作停顿，以便用户能够查看它并在到达最后一个标题后改变方向。

这里我们的代码：

<html>
<head>
<style type="text/css">
body
{
    background-color:blue;
    color:white;
    overflow:hidden;
}
span.start
{
    font-size:280%;
    font-family:helvetica;
}
div.spacer
{
    margin-top:50px;
}
div.spacer-left
{
    margin-left:30px;
}
div.box1
{
    width:400px;
    height:200px;
    display:inline-block;
    margin-left:10px;
    overflow:hidden;
}
div.box2
{
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:10px;
}
#cyan
{
    background-color:cyan;
}
#purple
{
    background-color:purple;
}
#lime
{
    background-color:lime;
}
#orange
{
    background-color:orange;
}
#red
{
    background-color:red;
 }
#yellow
{
    background-color:yellow;
}
div.length
{
    position:fixed;
    width:5000px;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
}
div.click
{
    font-size:500%;
    text-decoration:none;
    color:white;
    position:absolute;
    margin-left:1300px;
    margin-top:-400px;
}
#length:target
{
    margin-left:-1000px;
}
div.content
{
    position:relative;
    height:500px;
    font-size:200%;
}
</style>
<script type="text/javascript">
var rate = 0;
function scroll() {
    setInterval(function (){
        document.getElementById('content').style.marginTop = rate;
        rate--;
    }, 10);
}
onload=scroll();
</script>
</head>
<body>
<div class="length" id="length">
<div class="spacer-left">
<span class="start">Start</span>
<div class="spacer"></div>
<div class="box1" id="cyan">
<div class="content" id="content">
<h1>Some content</h1>
<h1>Some more content</h1>
<h1>Even more content</h1>
</div>
</div>
<div class="box1" id="purple">
</div>
<div class="box2" id="lime">
</div>
<div class="box2" id="orange">
</div>
<br>
<div class="box2" id="red">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="cyan">
</div>
<div class="box1" id="purple">
</div>
<br>
<div class="box1" id="lime">
</div>
<div class="box2" id="orange">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="red">
</div>
<a href="#length"><div class="click" id="click">
>
</div></a>
</div>
</div>
</body>
</html>

在这段代码中，内容只是滚动，中间没有停顿。

4

1 回答 1

0

如果您将 jQuery 用于动画，它很可能会更容易。我在这里为您提供了一个良好的代码开端：http: //jsfiddle.net/ou67gr51/1/

如您所见，我正在褪色而不是滑动。您可以轻松地将其更改为不同的动画。

还有更多工作要做，但我希望这对您有所帮助。

$('.box').each(function() {
    var $this = $(this);
    var $content = $('.content', $this);
    var i = -1;
    function showNext() {
        i++;
        if (i == $content.length)
            i = 0;
        
        $content.eq(i).fadeIn();
    }
    function switchToNext() {
        $content.eq(i).fadeOut(showNext);
    }
    showNext();
    window.setInterval(switchToNext, 2000);
});
body
{
    background-color:blue;
    color:white;
    overflow:hidden;
}
span.start
{
    font-size:280%;
    font-family:helvetica;
}
div.spacer
{
    margin-top:50px;
}
div.spacer-left
{
    margin-left:30px;
}
div.box1
{
    width:400px;
    height:200px;
    display:inline-block;
    margin-left:10px;
    overflow:hidden;
}
div.box2
{
    width:200px;
    height:200px;
    display:inline-block;
    margin-left:10px;
}
#cyan
{
    background-color:cyan;
}
#purple
{
    background-color:purple;
}
#lime
{
    background-color:lime;
}
#orange
{
    background-color:orange;
}
#red
{
    background-color:red;
 }
#yellow
{
    background-color:yellow;
}
div.length
{
    position:fixed;
    width:5000px;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
}
div.click
{
    font-size:500%;
    text-decoration:none;
    color:white;
    position:absolute;
    margin-left:1300px;
    margin-top:-400px;
}
#length:target
{
    margin-left:-1000px;
}
div.content
{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="length" id="length">
<div class="spacer-left">
<span class="start">Start</span>
<div class="spacer"></div>
<div class="box" id="cyan">
<div class="content">
<h1>1 Some content</h1>
</div>
    <div class="content">
<h1>2 Some content</h1>
</div>
    <div class="content">
<h1>3 Some content</h1>
</div>
</div>
<div class="box1" id="purple">
</div>
<div class="box2" id="lime">
</div>
<div class="box2" id="orange">
</div>
<br>
<div class="box2" id="red">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="cyan">
</div>
<div class="box1" id="purple">
</div>
<br>
<div class="box1" id="lime">
</div>
<div class="box2" id="orange">
</div>
<div class="box1" id="yellow">
</div>
<div class="box2" id="red">
</div>
<a href="#length"><div class="click" id="click">
>
</div></a>

于 2015-01-28T15:22:53.920 回答