Fatal编程技术网

Javascript Windows8网页设计

javascript html css

Javascript Windows8网页设计,javascript,html,css,Javascript,Html,Css,我正在做一个Windows8侧滚风格的网页设计。我需要帮助编写内容在矩形中显示的脚本。内容应该一个接一个地向下滚动，在标题之间稍有停顿，以便用户能够查看，并在到达最后一个标题后改变方向 下面是代码： <html> <head> <style type="text/css"> body { background-color:blue; color:white; overflow:hidden; } span.start { fon

我正在做一个Windows8侧滚风格的网页设计。我需要帮助编写内容在矩形中显示的脚本。内容应该一个接一个地向下滚动，在标题之间稍有停顿，以便用户能够查看，并在到达最后一个标题后改变方向

下面是代码：

<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>


身体
{
背景颜色：蓝色；
颜色：白色；
溢出：隐藏；
}
开始
{
字号：280%；
字体系列：helvetica；
}
隔套
{
边缘顶部：50px；
}
左分区
{
左边距：30px；
}
第1区
{
宽度：400px；
高度：200px；
显示：内联块；
左边距：10px；
溢出：隐藏；
}
第2分区
{
宽度：200px；
高度：200px；
显示：内联块；
左边距：10px；
}
#青色
{
背景色：青色；
}
#紫色的
{
背景颜色：紫色；
}
#石灰
{
背景色：石灰；
}
#橙色的
{
背景颜色：橙色；
}
#红色的
{
背景色：红色；
}
#黄色的
{
背景颜色：黄色；
}
分段长度
{
位置：固定；
宽度：5000px；
-moz转换：所有2s；
-webkit转换：所有2；
}
div.click
{
字体大小：500%；
文字装饰：无；
颜色：白色；
位置：绝对位置；
左边距：1300px；
利润上限：-400px；
}
#长度：目标
{
左边距：-1000px；
}
部门内容
{
位置：相对位置；
高度：500px；
字体大小：200%；
}
var率=0；
函数滚动（）{
setInterval（函数（）{
document.getElementById（'content'）.style.marginTop=速率；
比率--；
}, 10);
}
onload=scroll（）；
开始
一些内容
更多内容
更多内容
在这段代码中，内容只是滚动，但中间没有停顿。

如果您对动画使用jQuery，可能会更容易。我在这里为您介绍了代码的良好开端：

正如你所看到的，我不是在滑倒，而是在退步。您可以轻松地将其更改为其他动画

还有很多事情要做，但我希望这能帮到你

$（'.box'）。每个（函数（）{
var$this=$（this）；
变量$content=$（'.content'，$this）；
var i=-1；
函数showNext（）{
i++；
如果（i=$content.length）
i=0；
$content.eq（i）.fadeIn（）；
}
函数switchToNext（）{
$content.eq（i）.淡出（showNext）；
}
showNext（）；
设置间隔（switchToNext，2000）；
});

正文
{
背景颜色：蓝色；
颜色：白色；
溢出：隐藏；
}
开始
{
字号：280%；
字体系列：helvetica；
}
隔套
{
边缘顶部：50px；
}
左分区
{
左边距：30px；
}
第1区
{
宽度：400px；
高度：200px；
显示：内联块；
左边距：10px；
溢出：隐藏；
}
第2分区
{
宽度：200px；
高度：200px；
显示：内联块；
左边距：10px；
}
#青色
{
背景色：青色；
}
#紫色的
{
背景颜色：紫色；
}
#石灰
{
背景色：石灰；
}
#橙色的
{
背景颜色：橙色；
}
#红色的
{
背景色：红色；
}
#黄色的
{
背景颜色：黄色；
}
分段长度
{
位置：固定；
宽度：5000px；
-moz转换：所有2s；
-webkit转换：所有2；
}
div.click
{
字体大小：500%；
文字装饰：无；
颜色：白色；
位置：绝对位置；
左边距：1300px；
利润上限：-400px；
}
#长度：目标
{
左边距：-1000px；
}
部门内容
{
显示：无；
}



开始
1一些内容
2一些内容
3.一些内容





间隔中的时间以毫秒为单位。10秒钟，设定10000。不，你不明白我的意思。我的意思是，在页面加载时，一些内容将显示在该框中。一段时间后，比如说2秒钟，该框中会出现一个滚动条，滚动条将移动到下一个内容。然后它将保持静止两秒钟，然后再次切换到下一个内容。在进入最后一段内容后，该动议将反转并继续，以此类推。然后，该事件可能以错误的方式设置。尝试body.onload=滚动；重要提示：没有“（）”！不是那样。没错。我只是需要帮助在做上面提到的东西脚本。我制作的剧本没有做任何这些。