横向纵向滚动网站的制作 CSS & jQuery

by sunflowamedia ON 2010/11/03 1381

现在各式各样、稀奇古怪的网站层出不穷，网站也不再局限于标准宽度，长度的设置。国外很多页面都使用了在一个页面里实现横向和纵向的页面跳转，其不为网页设计的新的领域。
在本教程中，我们将创建一个使用 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="http://www.sunflowamedia.com/" 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="http://www.sunflowamedia.com/" 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="http://www.sunflowamedia.com/" 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和脚本包

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

脚本:

$(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();
	});
});

Download

国外作品范例: