jquery實現全屏滾動效果
阿新 • • 發佈：2021-08-24
本文例項為大家分享了實現全屏滾動的具體程式碼，供大家參考，具體內容如下
效果圖
思路
1.要全屏,給父級、body、html、高度設定為100%，自己的寬度也100%，還要給html、body設定溢位隱藏
html,body{
height:100%;
/* 實現全屏 */
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* 實現全屏 */
height: 100%;
}
div.wrap>div{
width:100%;height:100%;
}
2.引入mousewheel在引入min.之後
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script> <script src="../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
3.e.deltaY>0上滑 e.deltaY<0下滑
4.控制滑動一次
<script>
varhttp://www.cppcns.com flag = true;
if(flag){
//上滑
if(e.deltaY>0){
flag = false;
}
//下滑
else{
flag = false;
}
</script>5.讓他滑起來,應該改變父級(這裡是wrap的top,不是document的top,剛剛開始思路錯了，他的高度應該是子級的高度*-1)，注意應該是每次滑完了才能繼續滑動，所以function裡面要寫flag=true,為了讓它不越界，要把上滑和下滑寫在一個if裡面，看下程式碼
<script>
// 控制滑動一次
if(flag){
// 上滑
if(e.deltaY>0){
// 不能上滑了
if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}//下滑
else{
// 這個if讓它不能讓下繼續滑動
if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},function(){
flag=true;
})
}
}
}
</script>完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
www.cppcns.com <title></title>
<style>
*{margin:0;padding:0;}
/* 實現全屏 */
html,body{
height:100%;
overflow: hidden;
}
.wrap{
position: relative;
top: 0;
left: 0;
/* 實現全屏 */
height: 100%;
}
div.wrap>div{
width:100%;
height:100%;
}
div.one{
background:lightcoral;
}
div.two{
background:lightblue;
}
div.three{
background:lightseagreen;
}
div.four{
background:lightslategray;
}
div.five{
background:pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<script src="../../0817/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src=www.cppcns.com"../../0817/jquery-3.5.1/jquery.mousewheel.min.js"></script>
<script>
$(function(){
var flag = true;
var i=0;
var hei=$('.wrap>div').first().height();
$(document).mousewheel(function(e){
// 控制滑動一次
if(flag){
// 上滑
if(e.deltaY>0){
// 不能上滑了
if(i>0){
console.log(i)
i--;
flag = false;
$('.wrap').animate({top:-i*hei},function(){
flag=true;
})
}
}//下滑
else{
// 這個if讓它不能讓下繼續滑動
if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},function(){
flag=true;
})
}
}
http://www.cppcns.com }
})
})
</script>
</body>
</html>
總結:
1.top去實現
2.記到overflow
3.上滑的top依然是負數，不是正數
4.高度和寬度要設定為100%
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。