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移除了live()、die(),新版事件绑定on()、off()的方法
下面小编就为大家带来一篇jquery移除了live()、die(),新版事件绑定on()、off()的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)
jquery版,简单易用的jQuery 版仿新浪微博 向下滚动效果,现在越来越发现jquery太强大咯,哈哈。2011-02-02jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
下面小编就为大家带来一篇jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论