我正在制作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>
在这段代码中，内容只是在滚动，而在两者之间没有暂停。
最佳答案
如果您将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>