滑轮滑动+小圆点触发全屏上下滚动并实现不同浏览器窗口下的缩放

来源：互联网发布：在淘宝上买微星笔记本编辑：程序博客网时间：2024/05/14 02:09
css准备：模块宽度设置为100%；模块高度设置为100vh；内容区域设置为1000*800,居中显示;js:$(function(){           `//初始化页面置于顶部            $("html,body").animate({scrollTop:0},300);            var page = 0;            //浏览器当前窗口可视区域宽度            var viewWidth=$(window).width();            //浏览器当前窗口可视区域高度            var viewHeight=$(window).height();            //窗口宽度小于1000时，缩放            if(viewWidth<1000){                //可视区域的高度+下侧滚动条的高度                viewHeight+=17;                $(".content-box1").css("transform",'scale('+(viewWidth/1500)+')');                $(".content-box2").css("transform",'scale('+(viewWidth/1500)+')');                $(".content-box3").css("transform",'scale('+(viewWidth/1500)+')');            }            //宽度小于800时，缩放            if(viewHeight<800){                $(".content-box1").css("transform",'scale('+(viewHeight/900)+')');                $(".content-box2").css("transform",'scale('+(viewHeight/900)+')');                $(".content-box3").css("transform",'scale('+(viewHeight/900)+')');            }    //窗口变化时刷新页面            $(window).resize(function() {location.reload();});            //锚点跳转            $(".anchor-btn1").on("click",function(){                $(".circle02").addClass("active").siblings().removeClass("active");                jump("#content-box2");                page=1;            });            $(".anchor-btn2").on("click",function(){                $(".circle03").addClass("active").siblings().removeClass("active");                jump("#content-box3");                page=3;            });            //小圆点切换            $(".circle01").on("click",function(){                $("html,body").animate({"scrollTop": -(viewHeight * 1)},function(){                    $(".circle01").addClass("active").siblings().removeClass("active");                });            });            $(".circle02").on("click",function(){                $(".circle02").addClass("active").siblings().removeClass("active");                $("html,body").animate({"scrollTop": viewHeight * 1},function(){                    page=1;                    $(".circle01").off("click").on("click",function(){                        $("html,body").animate({"scrollTop": -(viewHeight * 1)},function(){                            $(".circle01").addClass("active").siblings().removeClass("active");                            page=0;                        });                    });                });            });            $(".circle03").on("click",function(){                $(".circle03").addClass("active").siblings().removeClass("active");                $("html,body").animate({"scrollTop": viewHeight * 2},function(){                    page=3;                    $(".circle01").off("click").on("click",function(){                        $("html,body").animate({"scrollTop": -(viewHeight * 2)},function(){                            $(".circle01").addClass("active").siblings().removeClass("active");                            page=0;                        });                    });                });            });            // jquery 兼容的滚轮事件  100vh            $(document).on("mousewheel DOMMouseScroll", function (e) {                e.preventDefault();                //滑轮滚动时先判断页面是否在动                if(!$("html,body").is(":animated")) {                    //获得判断值                    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie                            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox                    if (delta < 0) {                        // 向下滚                        e.preventDefault();                        //向上滚时page的结束值为-1，此时如果向下滚须先重置page为0                        if (page == -1) {page = 0;}                        if (page < 3) {                            page++;                            switch (page) {                                case 1:                                    $(".circle02").addClass("active").siblings().removeClass("active");                                    $("html,body").animate({"scrollTop": viewHeight * page}, function () {                                        page = 1                                    });                                    break;                                case 2:                                    if (!$("html,body").is(":animated")) {                                        $(".circle03").addClass("active").siblings().removeClass("active");                                        $("html,body").animate({"scrollTop": viewHeight * page}, function () {                                        });                                        break;                                }                            }                        }                    } else if (delta > 0) {                        // 向上滚                        e.preventDefault();                        //向下滚时page的结束值是3，此时如果向上滚须先重置page为2                        if (page == 3) {page = 2;}                        if (page >= 0) {                            page--;                            switch (page) {                                case 1:                                    $(".circle02").addClass("active").siblings().removeClass("active");                                    $("html,body").animate({"scrollTop": viewHeight * page}, function () {                                        page = 1;                                    });                                    break;                                case 0:                                    if (!$("html,body").is(":animated")) {                                        $(".circle01").addClass("active").siblings().removeClass("active");                                        $("html,body").animate({"scrollTop": viewHeight * page}, function () {                                        });                                        break;                                    }                            }                        }                    }                }            });            //声明跳转函数(可改变跳转时长)            function jump(sel) {                    $("html,body").animate({ scrollTop: $(sel).offset().top });            }        });
阅读全文
0 0