使用switchPage.js屏幕內容分頁鼠標滾輪滾動
體驗效果：
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. </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>