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)+')'); } //窗口变化
滑轮滑动+小圆点触发全屏上下滚动并实现不同浏览器窗口下的缩放
最新推荐文章于 2024-07-30 21:13:40 发布
该博客详细介绍了如何利用CSS和JavaScript实现全屏滚动效果,当滑轮滑动或点击小圆点时,页面会根据预设的锚点进行上下滚动。同时,当浏览器窗口大小变化时,内容区域会自动缩放以适应不同的视口尺寸。此外,还涉及到锚点跳转和滚动事件的处理,以确保在不同浏览器窗口下的良好体验。
摘要由CSDN通过智能技术生成