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


Posted in Javascript onJanuary 08, 2021

其实效果大概是这样的:

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

而标题,也许是我当时看到这种效果时的真实感受。因为第一反应是:“还可以把page整体移出页面?”

发现:display动画的应用

整件事的起因是什么呢?在笔者最近为社团计划的官网上打算做一个这样的效果:点击头像,左边/右边滑出一个“面板”,里面展示用户的个人信息。

当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏,display“加上动画!

我们大概都知道的是:HTML渲染过程中有一个可能执行的、影响页面性能的“回流”和“重绘”的过程。导致这个过程被触发的原因有很多:元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来,所以在我们看来是“突兀”的。
而且有一点需要注意的是:浏览器是“有点智能”的 —— 它可以判断如果会触发页面回流的代码有很多,那么它会将这些代码都读取完再(合并)一起执行,所以这也是下面这段代码会有如下图效果的原因:

/** css代码 */
width: 50px;
height: 50px;
background-color: red;
display: none;
transform: translateX(0);
transition: all .6s ease; //似乎没用?
//js代码
ds.style.display="block";
ds.style.transform="translateX(100px)";

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

但是同样的,当对以下属性进行操作的时候,由于浏览器的渲染机制有一些API可以使页面强制渲染(因为要获得详细确切的信息),包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。这会直接导致前后两行相当于“渲染了两遍”。

所以将上方js代码改为下面这样:

//js代码
ds.style.display="block";
ds.offsetHeight;
ds.style.transform="translateX(100px)";

就可以了

JS实现页面侧边栏效果探究
目前csdn官网PC端blink发布页面的图片上传就用了类似这个功能!

后来还是觉得这种方式需要涉及js对页面结构的改变,于是乎…

实现:如何实现文首展示的效果

这基于position定位是会“重合”的:在两个行内元素都设置了定位属性(但没有加top/left/bottom/right定位)后,后面的会覆盖前面的;这时候可以通过margin移动位置展示

只能是行内元素,行内块元素都不行。 ——云小梦

它大概结构是这样的:

<div class="page_list">
	<div class="z_two_page">
		<!-- 这里放右侧弹框展示的信息 -->
	</div>
	<div class="box">
		<!-- "页面"的遮罩层 -->
		<div class="zb_mask"></div>
		<!-- 这里放“页面”数据结构(也就是原本应该在body标签下的所有东西) -->
	</div>
	<!-- 这是占位元素 -->
	<div class="space"></div>
</div>

实际就像这样的:

<div class="page_list">
	<div class="z_two_page">哈哈哈</div>
	<div class="box">
		<div class="zb_mask"></div>
		
		<div id="boxs">
		 <div class="left" style="background-color:#ffc5c5;"></div>
		 <div class="right" style="background-color:#7171f7;">
			 flex下两列布局左边固定右边宽高自适应
		 </div>
		</div>
		<div class="color"></div>
		<a href="#" rel="external nofollow" class="a">千万小心像对a设置全局样式(这叫啥样式重置)</a>
		<div class="center">
			<div class="ds"></div>
			<button class="but">到指定地点</button>
		</div>
		<form id="form" action="#">
			<input type="submit" value="="踢脚板 />
		</form>
		<img id="img" src="compress/compress/img/mxc_16x16.png" />
	</div>
	
	<div class="space"></div>
</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属性;

/* 列表仅水平滚动 */
.page_list { width: 100vw; display: flex; overflow-y: hidden; }
/* 主内容宽度100%,白色背景覆盖 */
.box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto;overflow-x: hidden;transition: all .6s ease; }
/** 遮罩层样式 */
.zb_mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: rgba(0,0,0,.2);
	pointer-events: none;
	opacity: 0;
	transition: all .6s ease;
}
/* 空标签元素,作用是腾出水平滚动空间 */
.space { flex: 0 0 12rem; }
/* 按钮固定定位,藏在内容白色背景后面 */
.z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }

大概就是:什么也不干的情况下只展示box的内容(也就是和不加这些花里胡哨的div一样的效果),它是用background覆盖后面的class为“space”的占位元素;在”哈哈哈“展示的时候,box右移。

这里需要注意的是:为什么“哈哈哈”所属div在前而“页面”所属div在后?
因为根据前面所说,这里采用的是position覆盖,它的规则就是“后面的覆盖前面的”,所以如果采用这种布局方式,那么一开始被隐藏的元素就要放在前面。

代码中flex的前两个属性值为0,表示在空间增大或缩小时依然保持原状(这是本文的基础!),第三个元素则写了展示时的“默认大小”:如你所看,box承载的是页面,所以它是100vw,而class为“z_two_page”的元素这里设置了12rem ,你完全可以将这个值换掉!

那如何将“哈哈哈”展示在视野中? —— js控制“代表页面的元素”整体移动即可。

这里有个“遮罩层效果”,按照传统的js实现肯定就要去找display了,再进一步可以用上面所说的“display动画效果”增强体验。
但是本文上面css代码中加了 pointer-events 属性:元素是否穿透;设置为none时就可以不用在意对应元素是否存在了(从事件上看此时有和没有一样了),也就不用控制display什么的,大大增强性能了有木有!

let right=document.querySelector(".right");
let box=document.querySelector(".box");
let mask=document.querySelector(".zb_mask");
right.onclick=function(){
 box.style.marginLeft="-12rem";
 mask.style.cssText+="opacity: 1;pointer-events: all;"
}
mask.onclick=function(){
 box.style.marginLeft="0";
 mask.style.cssText+="opacity: 0;pointer-events: none;"
}

最后,考虑到移动端页面展示的一些问题,比如:右侧留白问题、原生手势对页面整体的影响等,我们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。如果你想要用户在移动端依然只能够通过点击弹出侧边栏,在这里我们可以在css中加上限制 —— 设置上方功能只有在PC端生效:

@media (any-hover: none) {
	.page_list{
		overflow-x: hidden;
	}
}

到此这篇关于JS实现页面侧边栏效果探究的文章就介绍到这了,更多相关js页面侧边栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
Vue性能优化的方法
Jul 30 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
详解Typescript里的This的使用方法
Jan 08 #Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 #Javascript
vue编写简单的购物车功能
Jan 08 #Vue.js
three.js中多线程的使用及性能测试详解
Jan 07 #Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
You might like
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python用Configobj模块读取配置文件
2020/09/26 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
电台实习生求职信
2014/02/25 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
小学生优秀评语大全
2014/04/22 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
Jsonp劫持学习
2021/04/01 PHP
php 原生分页
2021/04/01 PHP