| 原生js处理大屏顶部导航栏缩放问题（记录） | 您所在的位置：网站首页 › 淘宝首页1920全屏代码是什么 › 原生js处理大屏顶部导航栏缩放问题（记录） |
原生js处理大屏顶部导航栏缩放问题（记录）
|
一、前提
项目为一个pc端大屏展示，主要分为顶部导航栏与底部内容两大板块；技术方面。只用原生jq编写，iframe多页面跳转，利用bootstrap美化样式。其中，部分页面不方便做响应式调整，ui也没有给出相应的设计。经过分析，决定将整个页面作为整体来响应视口的变化。 但是，顶部导航栏有一条深色背景，整块压缩拉伸，必然会导致导航栏左右都留下空白，如下： 结构上，分为导航背景和真实内容两部分 xxx管理平台 欢迎登录！2021/10/13/11:45css处理： html,body{ width:100%; height:100%; overflow:hidden; } .screen-header{/*包裹单独导航图片容器*/ width:100%; height:88px; top:0; left:0; transform-origin: 0 0; transition:0.5s; } .home-nav{/*顶部导航图片*/ background:url('../images/header.png') center/100% 100% no-repeat; width:100%; height:100%; } .screen-wrap{/*内容1部分*/ width:1920px;/*内容部分一定要有固定的宽高，才能方便后续计算*/ height:937px;/*大屏下，不带浏览器导航栏的高度*/ box-sizing: border-box; position:absolute;/*方便将导航栏的文字内容对应到导航背景图位置*/ top:0; left:50%; transform-origin:0 0 ; transition:0.5s; border:1px solid red; } .screen-wrap-all{/*浏览器全屏状态下备用高度*/ height:980px; } 三、响应处理当屏幕缩放时，对导航栏图片和内容部分同步处理 let scTimer = null; let scale = 0; function getScale(){ const ww = document.documentElement.clientWidth/1920; const wh = document.documentElement.clientHeight/937; scale = ww //全屏按钮模式：浏览器导航栏隐藏 document.querySelector(".screen-wrap").className = "screen-wrap screen-wrap-all"; document.querySelector(".screen-wrap").style.transform = "scale(1) translate(-50%, 0)"; // 顶部导航栏样式 document.querySelector(".screen-header").style.height = "100px"; }else{//自由模式伸缩 document.querySelector(".screen-wrap").className = "screen-wrap"; document.querySelector(".screen-wrap").style.transform = "scale(" + scale + ") translate(-50%, 0)"; // 顶部导航栏样式 document.querySelector(".screen-header").style.height = scale * 88 + "px"; } } function debounce(){//延迟响应,减缓浏览器压力 if(scTimer)clearTimeout(scTimer); scTimer = setTimeout(()=>{ setScale(); },1000) } setScale(); window.addEventListener("resize",debounce);其他说明： translate(-50%, 0)，主要与包裹div的absolute定位与left:50%配合，使内容展示部分永远居中显示 |
反复计算，如果顶部导航栏内容包括背景图都摘出做响应，在全屏或部分拉伸比例情况下，会出现遮挡内容部分的情况。最终决定，将图中“真正内容部分”作为一个整体，这样宽度是青色的宽度，高度是占满全屏的高度，不必再用高度减去导航栏高度的计算造成误差。【本文地址】
公司简介
联系我们