体验效果：
http://hovertree.com/texiao/jquery/68/
源码下载：
http://hovertree.com/h/bjaf/f643upc4.htm
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标滚动垂直全屏切换代码 - 何问起</title><base target="_blank" />
<style type="text/css">
h1, body, html {
padding: 0;
margin: 0;
} html, body {
height: 100%;
overflow: hidden;
} h1 {
font-size: 2em;
font-weight: normal;
} p {
font-size: 1em;
margin: 0.5em 0 2em 0;
} #container, .section {
height: 100%;
position: relative;
} #section0, #section1, #section2, #section3 {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
} #section0 {
background-color: #024BCE;
color: #fff;
text-shadow: 1px 1px 1px #333;
} #section1 {
color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
} #section2 {
background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
} #section3 {
color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
} #section0 p { color: #F1FF00; } #section3 p { color: #00A3AF; } .left { float: left; } .intro {
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
} #pages {
position: fixed;
right: 10px;
top: 50%;
list-style: none;
} #pages li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 0 10px 5px;
} #pages li.active {
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
} #section0 .title {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
animation: sectitle0 1s ease-in-out 100ms forwards;
} #section0 p {
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation: sec0 1s ease-in-out 100ms forwards;
animation: sec0 1s ease-in-out 100ms forwards;
}
@-webkit-keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes
sec0 { 0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes
sec0 { 0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.hovertreecode{text-align:left;width:400px;margin:5px auto;border:solid green 1px;font-size:16px;}
a{color:greenyellow}
</style>
</head>
<body>
<div id="container">
<div class="section active" id="section0">
<div class="intro">
<h1 class="title">jQuery简单的全屏滚动翻页</h1>
<p>
http://hovertree.com
<br />请滚动鼠标滚轮。
</p>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏览器。</p>
<p>来源：<a href="http://hovertree.com" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/switchpage.htm">原文</a></p>
</div> </div>
<div class="section" id="section1">
<div class="intro">
<h1 class="title">Section Two</h1>
<p>This is Section Two. keleyi.com</p>
<img src="http://hovertree.com/texiao/jquery/68/images/hovertree1.jpg" alt="代码"/>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1 class="title">Section Three</h1>
<p>This is Section Three</p>
<pre class="hovertreecode"><span style="color: #008000;">/*</span><span style="color: #008000;">
使用代码
by 何问起
</span><span style="color: #008000;">*/</span><span style="color: #000000;">
$(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
$(</span>"#container"<span style="color: #000000;">).switchPage({
</span>'loop' : <span style="color: #0000ff;">true</span><span style="color: #000000;">,
</span>'keyboard' : <span style="color: #0000ff;">true</span><span style="color: #000000;">,
</span>'direction' : 'horizontal'<span style="color: #000000;">
});
});</span></pre>
</div>
</div>
</div> <script src="http://down.hovertree.com/jquery/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/switchPage.js"></script>
<script type="text/javascript">
$(function(){
$("#container").switchPage({
'loop' : true,
'keyboard' : true,
'direction' : 'horizontal'
});
});
</script> </body>
</html>