• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jquery实现全屏滚动效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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%

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一篇文章教你学会js实现弹幕效果发布时间:2022-02-05
下一篇:
微信小程序实现保存影集和图片到相册发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap