jquery实现全屏滚动效果
时间：2022-03-25 09:40:54|栏目：jquery|点击： 次
本文实例为大家分享了jquery实现全屏滚动的具体代码，供大家参考，具体内容如下
效果图
思路
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.js之后
<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>
var 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},1000,function(){
flag=true;
})
}
}
}
</script>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="../../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},1000,function(){
flag=true;
})
}
}//下滑
else{
// 这个if让它不能让下继续滑动
if(i<4){
i++;
flag = false;
$('.wrap').animate({top:-i*hei},1000,function(){
flag=true;
})
}
}
}
})
})
</script>
</body>
</html>
总结:
1.top去实现
2.记到overflow
3.上滑的top依然是负数，不是正数
4.高度和宽度要设置为100%
上一篇：Jquery组件easyUi实现手风琴(折叠面板)示例
栏 目：jquery
本文标题：jquery实现全屏滚动效果
本文地址：http://www.codeinn.net/misctech/197238.html
