全屏滚动

最新推荐文章于 2024-09-08 06:30:51 发布

jialijuan521_zhang

最新推荐文章于 2024-09-08 06:30:51 发布

阅读量205

点赞数

分类专栏： js

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

< !DOCTYPE html > <html > <head lang = "en" > <meta charset = "UTF-8" > <title > </title>
<style>
*{
margin:0;
padding:0;
border:0;
}
body{
overflow:hidden;
}
#wrap{
width:100%;
overflow: hidden;
}
#main{
position:relative;
width:100%;
}
#page01{
background-color:red;
}
#page02{
background-color:blue;
}
#page03{
background-color:green;
}
#page04{
background-color:pink;
}
</style > <script src = "js/jquery.js" > </script>
<script src="js/jqueryWheel.js "></script>
</head>
<body>
<div id="wrap ">
<div id="main ">
<div id="page01 " class="page "><h1>第一屏</h1></div>
<div id="page02 " class="page "><h1>第二屏</h1></div>
<div id="page03 " class="page "><h1>第三屏</h1></div>
<div id="page04 " class="page "><h1>第四屏</h1></div>
</div>
</div>
</body>
<script>
$(function(){
var screenWidth = $(window).width();
var screenHeight = $(window).height();
$("#wrap ").css("height ",screenHeight);
$(".page ").css("width ",screenWidth);
$(".page ").css("height ",screenHeight);
var startTime = 0;
//为滚轮添加滚动事件，如果滚轮滚动时，此时的scrollTop值大于初始时的scrollTop的值，则代表向下滚动，反之，向上滚动
$(window).mousewheel(function(event,delta){
var endTime = new Date().getTime();
console.log("endTime: " , endTime) ;
if(endTime - startTime > 1000) {
startTime = endTime ;
console.log("startTime: " , startTime );
if(delta == -1) { //如果是向下滚动，
var currentBodyTopPx = $("#main ").css("top ");
currentBodyTopValue = currentBodyTopPx.substring(0,currentBodyTopPx.lastIndexOf("p "));
if( parseInt(currentBodyTopValue) + ($(".page ").length - 1) * screenHeight == 0 ) { //如果到达了最后一屏，则停止向下滚动页面
return ;
} else {
}
console.log("向下滚动了");
//如果是向下滚动,将body的top属相减少pageHeight个px
console.log("滚动之前currentBodyTop: " , currentBodyTopValue);
$("#main ").animate({top:(currentBodyTopValue - screenHeight) + "px "},1000);
console.log("滚动之后currentBodyTop: " , (currentBodyTopValue - screenHeight) + "px ");
} else {
var currentBodyTopPx = $("#main ").css("top ");
currentBodyTopValue = currentBodyTopPx.substring(0,currentBodyTopPx.lastIndexOf("p "));
if( parseInt(currentBodyTopValue) == 0 ) { //如果到达了最后一屏，则停止向下滚动页面
return ;
} else {
}
//如果是向下滚动,将body的top属相减少pageHeight个px
console.log("滚动之前currentBodyTop: " , currentBodyTopValue);
$("#main ").animate({"top " : (parseInt(currentBodyTopValue) + screenHeight) + "px "},1000);
console.log("滚动之后currentBodyTop: " , (parseInt(currentBodyTopValue) + screenHeight) + "px ");
}
}
});
});
</script>
</html>"