如何制作纵横向滚动网站

$(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(); }); }); Tag：网站   制作   网站   制造   --> [网站建设之]如何制作纵横向转动网站

Step1. 创建HTML

<script type="text/javascript" src=" <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

脚本:

View Demo

Step3. 插入jQuery跟脚本包

         当初我们能看到的网站各式各样、八怪七喇，网站也不再局限于尺度宽度，长度的设置。国外良多页面都使用了在一个页面里实现横向和纵向的页面跳转，其不为网页设计的新的范畴。
在本教程中，我们将创建一个应用 jQuery 简单平滑滚动后果。我们将创建一个水温和垂直网站的布局。咱们将使用 jQuery plugins，脚本代码只有区区多少行，十分简略。

<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+css静态页面;/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;
}