效果類似這個網址所示：https://www.xyaz.cn/，網上也有這方面的插件，比如這個fullPage.js插件，https://alvarotrigo.com/fullPage/zh/#page1
我這個的是參考這位的：http://www.webfront-js.com/articaldetail/18.html。僅僅只是自己用作記錄。
結構就是一個div作為容器，里面放要切換的頁面。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏切換</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.page {
height: 100%;
width: 100%;
font-size: 126px;
display: -webkit-box;
/*Safari*/
display: -moz-box;
/*Firefox*/
display: -ms-flexbox;
/*IE*/
display: -webkit-flex;
/*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
</style>
<body>
<div id="mao">
<div class="page" id="item-0" style="background-color: pink;">Prat 0</div>
<div class="page" id="item-1" style="background-color: palegreen;">Prat 1</div>
<div class="page" id="item-2" style="background-color: yellow;">Prat 2</div>
<div class="page" id="item-3" style="background-color: #E91E63;">Prat 3</div>
<div class="page" id="item-4" style="background-color: teal;">Prat 4</div>
<div class="page" id="item-5" style="background: wheat;">Prat 5</div>
<div class="page" id="item-6" style="background-color: yellowgreen;">Prat 6</div>
</div>
<script type="text/javascript">
$(function ($) {
$.fn.screen = function (options) {
var $this = this;//第一個div
var set = $.extend({
before: [],
after: []
}, options);
$this.css({
overflow: 'hidden',
position: 'fixed',
width: '100%',
height: '100%',
left: '0',
top: '0'
});
var ch = $this.children('div');
$this.empty();
var secondDiv = $('<div></div>').css({
position: "relative",
left: '0',
top: '0',
width: '100%',
height: '100%',
visibility: "visible"
});
secondDiv.appendTo($this);
ch.css({
height: '100%',
width: '100%'
}).appendTo(secondDiv);
var navbarUl = $("<ul></ul>").css({
position: 'absolute',
top: '50%',
"z-index": "1000",
right: "10%"
});
ch.each(function (i) {
var barele = $("<li></li>").attr("index", i).css({
border: "3px solid #2876B3",
"border-radius": "50%",
width: "14px",
height: "14px",
"list-style": "none",
cursor: "point",
"margin-bottom": "6px",
"background-color": (i == 0 ? "#fff" : "transparent")
});
barele.appendTo(navbarUl);
});
//console.log(navbarUl.height()); //打印0
//先將其添加到HTML文檔流對象中，再設置其top位置，不然其位置計算會忽略掉其自身高度。
navbarUl.appendTo($this);
//console.log(navbarUl.height()); //打印182高度
navbarUl.css({
"margin-top": -parseInt(navbarUl.height()) / 2 + "px"
});
var wheelName = navigator.userAgent.indexOf("Firefox") > 0 ? "DOMMouseScroll" : "mousewheel";
$this.bind(wheelName, function () {
var event = window.event || arguments.callee.caller.arguments[0];
//console.log(event);
var contentV = 0;
//統一線下滾動為負數
if (event.wheelDelta) {
contentV = Math.floor(event.wheelDelta / 120) * 60;
} else if (event.detail) {
contentV = -Math.floor(event.detail / 3) * 60;
}
//console.log(contentV);
if (contentV < 0) {
//向下滾動為1，向上滾動為-1
console.log("下滾動作");
slide(1);
} else {
console.log("上滾動作");
slide(-1);
}
});
var currentPage = 0;//當前的頁數
var lg = secondDiv.children("div").length;
//var sht=_i.children('div').outerHeight();//得到屏內容的高度。也就是每次要切屏時div向上向下移動的量。
var flag = true;
//n是1就向下切屏，n是-1就向上切屏。
function slide(n) {
if (!flag) {
return;
}
flag = false;
if (n > 0 && currentPage < (lg - 1)) {
console.log("執行下滾");
if (set.before[currentPage]) {
set.before[currentPage]();
}
currentPage++;
animateDown(currentPage);
} else {
if (n < 0 && currentPage > 0) {
console.log("執行上滾")
if (set.before[currentPage]) {
set.before[currentPage]();
}
currentPage--;
animateDown(currentPage);
} else {
flag = true;
}
}
}
function animateDown(c) {
secondDiv.animate({ top: -c * 100 + '%' }, 'slow', function () {
navbarUl.find('li').css({ background: 'transparent' });
navbarUl.find('li').eq(c).css("background", "#fff");
if (set.after[c]) {
set.after[c]();
}
flag = true;
});
}
//初始化容器高度
ch.height($(window).height());
//窗口改變，容器高度也改變
$(window).resize(function () {
ch.height($(window).height());
});
navbarUl.children('li').on('click', function () {
var $index = $(this).index();
animateDown($index);
currentPage = $index;
});
}
}(jQuery));
</script>
</body>
</html>
<script>
//引用方法
$(function () {
$('#mao').screen();
});
</script>