jquery实现全屏滚动效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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%
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。