用js的定时器写的小玩意...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">
<div id="page1">
<p>我是第一页</p>
</div>
<div id="page2">
<p>我是第二页</p>
</div>
<div id="page3">
<p>我是第三页</p>
</div>
<div id="page4">
<p>我是第四页</p>
</div>
</div>
<script src="FullPage.js"></script>
</body>
</html>
html部分父容器里放上几个div，每个div占一整屏
<style>
*{
padding: 0;
margin: 0;
}
#container{
overflow: hidden;
}
#page1{
background: coral;
position: relative;
}
#page2{
background: mediumspringgreen;
position: relative;
}
#page3{
background: #00bfbf;
position: relative;
}
#page4{
background: royalblue;
position: relative;
}
p{
position: absolute;
left: 50%;
top: 50%;
margin: -33px -125px;
font-size: 50px;
}
</style>
css嘛关键就是父容器要设置overflow: hidden;
window.onload = function () {
pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘);
};
//改变页面大小做出变化
window.onresize = function () {
pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘);
};
function pageHeight(){
var windowHeight = window.innerHeight;//整个页面高度
for(var i=0; i<arguments.length; i++){
document.getElementById(arguments[i]).style.height = windowHeight + ‘px‘;
}
var flag = true; //在滚动时不影响
var parObj = document.getElementById(arguments[0]);
var maxHeight = (arguments.length-2)*windowHeight;
function foo(e) {
//判断滚动条滚动的方向
var e=e||window.event;
if(e.wheelDelta){
//e.wheelDelta 其他浏览器识别的
if(e.wheelDelta>0){
//console.log("向上滚动");
move(parObj, e.wheelDelta);
}else{
//console.log("向下滚动");
move(parObj, e.wheelDelta);
}
}else if(e.detail){
//e.detail是火狐浏览器识别
if(e.detail>0){
console.log("向下滚动");
move(parObj, -e.detail);
}else{
console.log("向上滚动");
move(parObj, -e.detail);
}
}
}
//绑定滚动事件
if(document.addEventListener){
document.addEventListener(‘DOMMouseScroll‘,foo,false);
}
//W3C
window.onmousewheel=document.onmousewheel=foo;//IE/Opera/Chrome
function move(parObj, wheelDelta){
if (!flag) {
return;
}
flag =false;
if(wheelDelta>0){
var tarHeight = parObj.scrollTop - windowHeight;
if(tarHeight <= 0){
tarHeight = 0;
}else{
tarHeight = parObj.scrollTop - windowHeight;
}
parObj.timer = setInterval(function () {
if(parObj.scrollTop > tarHeight){
parObj.scrollTop = parObj.scrollTop + Math.floor((tarHeight - parObj.scrollTop)/10);
}
if(parObj.scrollTop == tarHeight){
clearInterval(parObj.timer);
flag = true;
}
}, 50);
}else{
var tarHeight = (windowHeight + parObj.scrollTop);
if(tarHeight >= maxHeight){
tarHeight = maxHeight;
}else{
tarHeight = (windowHeight + parObj.scrollTop);
}
parObj.timer = setInterval(function () {
if(parObj.scrollTop < tarHeight){
parObj.scrollTop = parObj.scrollTop + Math.ceil((tarHeight - parObj.scrollTop)/10);
}
if(parObj.scrollTop == tarHeight){
clearInterval(parObj.timer);
flag = true;
}
}, 50);
}
}
}
js 监听滑轮，利用定时器移动一屏的高度
用的时候只要改变函数里的参数就可以了 pageHeight(‘container‘, ‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘, ‘page5‘.....); 随着父容器里有多少子div传进去就ok
时间： 2024-10-07 04:45:01