如何制作纵横向滚动网站

网络整理 - 07-27

现在我们能看到的网站各式各样、稀奇古怪，网站也不再局限于标准宽度，长度的设置。国外很多页面都使用了在一个页面里实现横向和纵向的页面跳转，其不为网页设计的新的领域。
在本教程中，我们将创建一个使用 jQuery 简单平滑滚动效果。我们将创建一个水平和垂直网站的布局。我们将使用 jQuery plugins，脚本代码只有区区几行，非常简单。

View Demo

Step1. 创建HTML

<div class="section black" id="section1"> <h2>Page 1</h2> <p> This is page one, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p> <p class="link">Welcome to <a href="" target="_blank">Sunflowa Media Website</a></p> <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</a></p> <ul class="nav"> <li>1</li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> </ul></div><div class="section white" id="section2"> <h2>Page 2</h2> <p> This is page two, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p> <p class="link">Welcome to <a href="" target="_blank">Sunflowa Media Website</a></p> <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</a></p> <ul class="nav"> <li><a href="#section1">1</a></li> <li>2</li> <li><a href="#section3">3</a></li> </ul></div><div class="section yellow" id="section3"> <h2>Page 3</h2> <p> This is page three, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life. </p> <p class="link">Welcome to <a href="" target="_blank">Sunflowa Media Website</a></p> <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</a></p> <ul class="nav"> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li>3</li> </ul></div>

Step2. 创建CSS

横向:
body {
background: #222;
font-size: 12px;
letter-spacing: 1px;
width: 12000px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.section {
width: 4000px;
margin: 0px;
bottom: 0px;
float: left;
height: 100%;
font-size: 26px;
}
.section h2 {
margin:50px 0px 30px 50px;
}
.section p {
width: 950px;
margin: 20px 0px 0px 50px;
}
.section p.link {
font-size: 0.78em;
}
.section p.link a {
color: #3FA4E6;
}
.section p.link a:hover {
color: #2c709c;
text-decoration: none;
}
.black {
color: #AAA;
background: #000;
}
.white {
color: #333;
background: #fff;
}
.yellow {
color: #333;
background: #f9f66d;
}
.section ul{
list-style: none;
margin: 20px 0px 0px 550px;
}
.black ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.black ul li a{
display: block;
color: #DDD;
padding: 0 8px;
}
.black ul li a:hover{
text-decoration: none;
color: #AAA;
}
.white ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.white ul li a{
display: block;
color: #222;
}
.white ul li a:hover{
text-decoration: none;
color: #000;
}
.yellow ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.yellow ul li a{
display: block;
color: #222;
}
.yellow ul li a:hover{
text-decoration: none;
color: #000;
}
纵向:
.section {
width: 100%;
height: 4000px;
margin: 0px;
float: left;
font-size: 26px;
}
.section h2 {
margin: 50px 0px 30px 50px;
}
.section p {
width: 950px;
margin: 20px 0px 0px 50px;
}
.section p.link {
font-size: 0.78em;
}
.section p.link a {
color: #3FA4E6;
}
.section p.link a:hover {
color: #2c709c;
text-decoration: none;
}
.black{
color: #fff;
background: #000;
}
.white{
color: #000;
background: #fff;
}
.yellow {
color: #333;
background: #f9f66d;
}
.section ul{
list-style: none;
margin: 20px 0px 0px 550px;
}
.black ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.black ul li a{
display: block;
color: #f0f0f0;
}
.black ul li a:hover{
text-decoration: none;
color: #fff;
}
.white ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.white ul li a{
display: block;
color: #222;
}
.white ul li a:hover{
text-decoration: none;
color: #000;
}
.yellow ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.yellow ul li a{
display: block;
color: #222;
}
.yellow ul li a:hover{
text-decoration: none;
color: #000;
}

Step3. 插入jQuery和脚本包

脚本:

$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this); /* $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1500,'easeInOutExpo'); */ 纵向代码，替换下面$('html, body').stop().animate({scrollLeft: $($anchor.attr('href')).offset().left}, 1000);event.preventDefault();});});