• 售前

  • 售后

热门帖子
入门百科

JS实现页面侧边栏结果探究

[复制链接]
甜如蜜forever 显示全部楼层 发表于 2021-10-25 19:10:36 |阅读模式 打印 上一主题 下一主题
目次


  • 发现:display动画的应用
  • 实现:怎样实现文首展示的效果
实在效果大概是如许的:

而标题,大概是我当时看到这种效果时的真实感受。由于第一反应是:“还可以把page团体移出页面?”

发现:display动画的应用

整件事的因由是什么呢?在笔者近来为社团计划的官网上打算做一个如许的效果:点击头像,左边/右边滑出一个“面板”,内里展示用户的个人信息。
固然,这有很多种做法,好比:使用position定位+overflow溢出隐蔽、使用opacity/visibility隐蔽+pointer-events元素穿透… 但是笔者当时想到的是怎样给”真正的隐蔽,display“加上动画!
我们大概都知道的是:HTML渲染过程中有一个可能实行的、影响页面性能的“回流”和“重绘”的过程。导致这个过程被触发的缘故原由有很多:元素位置移动、巨细改变、增删节点以及这里要说的display表现与隐蔽切换等等。而元素的变更需要页面快速的表现出来,所以在我们看来是“突兀”的。
而且有一点需要注意的是:浏览器是“有点智能”的 —— 它可以判断如果会触发页面回流的代码有很多,那么它会将这些代码都读取完再(归并)一起实行,所以这也是下面这段代码会有如下图效果的缘故原由:
  1. /** css代码 */
  2. width: 50px;
  3. height: 50px;
  4. background-color: red;
  5. display: none;
  6. transform: translateX(0);
  7. transition: all .6s ease; //似乎没用?
复制代码
  1. //js代码
  2. ds.style.display="block";
  3. ds.style.transform="translateX(100px)";
复制代码

但是同样的,当对以下属性举行操作的时间,由于浏览器的渲染机制有一些API可以使页面欺压渲染(由于要得到具体确切的信息),包罗:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。这会直接导致前后两行相称于“渲染了两遍”。
所以将上方js代码改为下面如许:
  1. //js代码
  2. ds.style.display="block";
  3. ds.offsetHeight;
  4. ds.style.transform="translateX(100px)";
复制代码
就可以了

目前csdn官网PC端blink发布页面的图片上传就用了雷同这个功能!
厥后还是以为这种方式需要涉及js对页面布局的改变,于是乎…

实现:怎样实现文首展示的效果

这基于position定位是会“重合”的:在两个行内元素都设置了定位属性(但没有加top/left/bottom/right定位)后,反面的会覆盖前面的;这时间可以通过margin移动位置展示
  1. 只能是行内元素,行内块元素都不行。 ——云小梦
复制代码
它大概布局是如许的:
  1. <div class="page_list">
  2.         <div class="z_two_page">
  3.                 <!-- 这里放右侧弹框展示的信息 -->
  4.         </div>
  5.         <div class="box">
  6.                 <!-- "页面"的遮罩层 -->
  7.                 <div class="zb_mask"></div>
  8.                 <!-- 这里放“页面”数据结构(也就是原本应该在body标签下的所有东西) -->
  9.         </div>
  10.         <!-- 这是占位元素 -->
  11.         <div class="space"></div>
  12. </div>
复制代码
现实就像如许的:
  1. <div class="page_list">
  2.         <div class="z_two_page">哈哈哈</div>
  3.         <div class="box">
  4.                 <div class="zb_mask"></div>
  5.                
  6.                 <div id="boxs">
  7.                  <div class="left" style="background-color:#ffc5c5;"></div>
  8.                  <div class="right" style="background-color:#7171f7;">
  9.                          flex下两列布局左边固定右边宽高自适应
  10.                  </div>
  11.                 </div>
  12.                 <div class="color"></div>
  13.                 <a href="#" rel="external nofollow" class="a">千万小心像对a设置全局样式(这叫啥样式重置)</a>
  14.                 <div class="center">
  15.                         <div class="ds"></div>
  16.                         <button class="but">到指定地点</button>
  17.                 </div>
  18.                 <form id="form" action="#">
  19.                         <input type="submit" value="="踢脚板 />
  20.                 </form>
  21.                 <img id="img" src="compress/compress/img/mxc_16x16.png" />
  22.         </div>
  23.        
  24.         <div class="space"></div>
  25. </div>
复制代码
如上,class为“box”的div内里放的就是“原本的页面团体”部分。为了达到想要的效果,我们采用了flex布局!
flex简写时包罗三个属性:flex-grow、flex-shrink和flex-basis ——
      
  • flex-grow:指定了容器剩余空间多余时间的分配规则,默认值是0,多余空间不分配;  
  • flex-shrink:指定了容器剩余空间不敷时间的分配规则,默认值是1,空间不敷要分配;  
  • flex-basis:flex-basis则是指定了固定的分配数目,默认值是auto。
设置的同时需设置width或者height属性;
  1. /* 列表仅水平滚动 */
  2. .page_list { width: 100vw; display: flex; overflow-y: hidden; }
  3. /* 主内容宽度100%,白色背景覆盖 */
  4. .box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto;overflow-x: hidden;transition: all .6s ease; }
  5. /** 遮罩层样式 */
  6. .zb_mask{
  7.         position: absolute;
  8.         top: 0;
  9.         left: 0;
  10.         width: 100%;
  11.         height: 100%;
  12.         z-index: 100;
  13.         background-color: rgba(0,0,0,.2);
  14.         pointer-events: none;
  15.         opacity: 0;
  16.         transition: all .6s ease;
  17. }
  18. /* 空标签元素,作用是腾出水平滚动空间 */
  19. .space { flex: 0 0 12rem; }
  20. /* 按钮固定定位,藏在内容白色背景后面 */
  21. .z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }
复制代码
大概就是:什么也不干的环境下只展示box的内容(也就是和不加这些花里胡哨的div一样的效果),它是用
  1. background
复制代码
覆盖反面的
  1. class
复制代码
为“space”的占位元素;在”哈哈哈“展示的时间,box右移。
  1. 这里需要注意的是:为什么“哈哈哈”所属div在前而“页面”所属div在后?
  2. 因为根据前面所说,这里采用的是position覆盖,它的规则就是“后面的覆盖前面的”,所以如果采用这种布局方式,那么一开始被隐藏的元素就要放在前面。
复制代码
代码中flex的前两个属性值为0,表如今空间增大或缩小时依然保持原状(这是本文的根本!),第三个元素则写了展示时的“默认巨细”:如你所看,box承载的是页面,所以它是
  1. 100vw
复制代码
,而
  1. class
复制代码
为“z_two_page”的元素这里设置了
  1. 12rem
复制代码
,你完全可以将这个值换掉!
那怎样将“哈哈哈”展示在视野中? —— js控制“代表页面的元素”团体移动即可。
这里有个“遮罩层效果”,按照传统的js实现肯定就要去找display了,再进一步可以用上面所说的“display动画效果”增强体验。
但是本文上面css代码中加了
  1. pointer-events
复制代码
属性:元素是否穿透;设置为none时就可以不用在意对应元素是否存在了(从事件上看此时有和没有一样了),也就不用控制display什么的,大大增强性能了有木有!
  1. let right=document.querySelector(".right");
  2. let box=document.querySelector(".box");
  3. let mask=document.querySelector(".zb_mask");
  4. right.onclick=function(){
  5. box.style.marginLeft="-12rem";
  6. mask.style.cssText+="opacity: 1;pointer-events: all;"
  7. }
  8. mask.onclick=function(){
  9. box.style.marginLeft="0";
  10. mask.style.cssText+="opacity: 0;pointer-events: none;"
  11. }
复制代码
末了,考虑到移动端页面展示的一些题目,好比:右侧留白题目、原生手势对页面团体的影响等,我们一般会在css中设置
  1. html{max-width: 100vw;overflow-x: hidden;}
复制代码
。如果你想要用户在移动端依然只能够通过点击弹出侧边栏,在这里我们可以在css中加上限制 —— 设置上方功能只有在PC端生效:
  1. @media (any-hover: none) {
  2.         .page_list{
  3.                 overflow-x: hidden;
  4.         }
  5. }
复制代码
到此这篇关于JS实现页面侧边栏效果探究的文章就先容到这了,更多相干js页面侧边栏内容请搜刮草根技术分享从前的文章或继续浏览下面的相干文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作