一种html页面的弹层缩放展示方法、装置及设备与流程

1.本技术涉及计算机技术领域，特别涉及一种html页面的弹层缩放展示方法、装置、设备及计算机可读存储介质。


背景技术：

2.随着网络信息的发展，人们从网上能获取到的信息越来越丰富。在各个网站中，考虑数据加载的流畅性，人们获取信息的密集度，越来越多的信息会采取弹层来展示。但是传统的弹层在网页的展示很卡顿，即一般点击页面某一位置后，直接地展示在页面正中央，点击关闭时，突然消失在页面。同时在实现弹层缩放效果时，采取的是通过javascript进行计算，从而改变弹层在网页中的位置，因此会造成的大量的性能计算，大大的消耗了浏览器性能，而且因为javascript不能根据屏幕的刷新率实时动画，会造成视觉上的卡顿感，对于用户来说体验效果不够流畅，视觉感受略差。


技术实现要素：

3.本技术的目的是提供一种html页面的弹层缩放展示方法、装置、设备及计算机可读存储介质，用以解决目前弹层展示位置固定且动画卡顿的问题。其具体方案如下：
4.第一方面，本技术提供了一种html页面的弹层缩放展示方法，包括：
5.确定弹层缩放的起始位置；
6.确定弹层缩放的最终位置；
7.根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画。
8.可选的，所述确定弹层缩放的起始位置，包括：
9.根据用户对html页面中dom元素节点的点击操作，确定被点击的dom元素节点的位置，以作为弹层缩放的起始位置。
10.可选的，所述确定弹层缩放的最终位置，包括：
11.通过读取html页面的源代码，确定弹层缩放的最终位置。
12.可选的，在所述根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画之前，还包括：
13.确定弹层的展示大小，所述展示大小包括高度和宽度。
14.可选的，所述根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画，包括：
15.创建按钮，并为所述按钮绑定弹层展开事件和弹层缩回事件；
16.在弹层不存在时，响应于用户对所述按钮的点击操作，根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层展开动画；
17.在弹层存在时，响应于用户对所述按钮的点击操作，根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩回动画。
18.可选的，所述根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画，包括：
19.根据所述起始位置和所述最终位置计算弹层的位置偏移量，根据所述位置偏移量，利用浏览器内置属性transition展示弹层缩放动画。
20.可选的，所述根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画，包括：
21.在预设时间内，根据屏幕刷新率、所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画。
22.第二方面，本技术提供了一种html页面的弹层缩放展示装置，包括：
23.起始位置确定模块，用于确定弹层缩放的起始位置；
24.最终位置确定模块，用于确定弹层缩放的最终位置；
25.展示模块，用于根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画。
26.第三方面，本技术提供了一种html页面的弹层缩放展示设备，包括：
27.存储器：用于存储计算机程序；
28.处理器：用于执行所述计算机程序，以实现如上所述的html页面的弹层缩放展示方法。
29.第四方面，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时用于实现如上所述的html页面的弹层缩放展示方法。
30.本技术所提供的一种html页面的弹层缩放展示方法，包括：确定弹层缩放的起始位置；确定弹层缩放的最终位置；根据起始位置和最终位置，利用浏览器内置属性transition展示弹层缩放动画。可见，该方法实现了基于html页面内任意元素位置展现弹层缩放动画的目的，且利用浏览器内置属性transition展示弹层缩放动画，能更好的利用计算机的gpu加速渲染，减轻计算机计算压力，用户体验效果流畅。
31.此外，本技术还提供了一种html页面的弹层缩放展示装置、设备及计算机可读存储介质，其技术效果与上述方法的技术效果相对应，这里不再赘述。
附图说明
32.为了更清楚的说明本技术实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
33.图1为本技术所提供的html页面的弹层缩放展示方法实施例一的流程图；
34.图2为本技术所提供的html页面的弹层缩放展示方法实施例二的过程示意图；
35.图3为本技术所提供的html页面的弹层缩放展示装置实施例的功能框图；
36.图4为本技术所提供的html页面的弹层缩放展示设备实施例的结构示意图。
具体实施方式
37.为了使本技术领域的人员更好地理解本技术方案，下面结合附图和具体实施方式对本技术作进一步的详细说明。显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
38.现有技术中，有一种基于bootstrap的弹层展示方法。该方法将html页面中任意点击一点确定为弹层的初始位置，但是弹层在页面的最终展示效果固定在页面的顶部，不可改变，而且该方法通过javascript中的setinterval方法实现间隔毫秒内动态地改变弹层位置，直至页面最终展示的指定位置，也就是说，该方法主要利用javascript中的setinterval方法实时计算并改变弹层对于浏览器所在的绝对定位。
39.上述方法存在以下缺点：(1)在实时计算弹层位置后，作出页面改变，计算量较大，大大地消耗了计算机的性能；(2)没有根据屏幕刷新率同步进行过渡动画的改变，导致过渡动画会有些卡顿；(3)没有利用到计算机gpu图形加速的硬件优势，在增加计算机计算负担的同时，并没有提升计算体验。
40.针对上述技术问题，本技术的核心在于提供一种html页面的弹层缩放展示方法、装置、设备及计算机可读存储介质，实现了在页面html任意一处实现弹层的缩放效果，充分利用计算机的硬件优势一次性计算元素的初始位置和最终位置，没有过多消耗计算机的性能，利用浏览器内置属性transition达到平滑过渡的效果，能更好的利用计算机的gpu加速渲染，减轻计算机计算压力，用户体验效果流畅。
41.本技术可广泛应用于弹层在html页面中的缩放动画，特别用于页面中特定内容的展示,使过渡动画更加流畅，提升用户交互体验，优化视觉效果。
42.下面对本技术提供的html页面的弹层缩放展示方法实施例一进行介绍，参见图1，实施例一包括：
43.s11、确定弹层缩放的起始位置；
44.s12、确定弹层缩放的最终位置；
45.s13、根据起始位置和最终位置，利用浏览器内置属性transition展示弹层缩放动画。
46.具体的，通过点击html页面的某一dom元素节点，获取被点击节点在页面的位置，从而确定弹层展开动画的起始位置。通过页面的html代码结构中的css、javascript获取弹层在页面中最终位置。确定弹层从无到有的位置变化后，通过弹层的css从起始位置到最终位置展示弹层动画，从而实现弹层出现效果或弹层消失效果。
47.上述dom节点，html文档中的所有内容都是节点，整个文档是一个文档节点，每个html元素是元素节点，html元素内的文本是文本节点，每个html属性是属性节点。
48.作为一种具体的实施方式，在展示弹层缩放动画之前，还可以获取弹层的展示大小，其中展示大小包括高度和宽度等信息。
49.作为一种具体的实施方式，可以创建一个按钮，并为该按钮绑定弹层展开事件和弹层缩回事件；在弹层不存在时，响应于用户对按钮的点击操作，根据起始位置和最终位置，利用浏览器内置属性transition展示弹层展开动画；在弹层存在时，响应于用户对按钮的点击操作，根据起始位置和最终位置，利用浏览器内置属性transition展示弹层缩回动
画。
50.具体的弹层动画展示过程如下：根据起始位置和最终位置计算弹层的位置偏移量，获取屏幕刷新率，在预设时间内根据屏幕刷新率和上述位置偏移量，利用浏览器内置属性transition展示弹层缩放动画。根据屏幕刷新率同步进行过渡动画的改变，使得过渡动画更加流畅，此外，利用到计算机gpu图形加速的硬件优势，充分释放计算机图形构建能力了，解放cpu的计算负担的同时，提升计算体验。
51.本实施例所提供一种html页面的弹层缩放展示方法，包括：确定弹层缩放的起始位置；确定弹层缩放的最终位置；根据起始位置和最终位置，利用浏览器内置属性transition展示弹层缩放动画。可见，该方法通过提前一次性计算好弹层起始位置和最终位置的数据，利用浏览器内置属性transition达到平滑过渡的效果，这样能更好的利用计算机的gpu加速渲染，减轻计算机计算压力。
52.下面开始详细介绍本技术提供的html页面的弹层缩放展示方法实施例二。
53.本实施例的目标是提供一种基于html页面内任意元素位置展现弹层缩放动画的方法，通过获取弹层缩放的最初位置和结束位置，确定弹层展示时的大小，最后实现弹层在页面任意位置的展现效果。
54.接下来以浏览器中表格的查看详情按钮，点击后出现弹窗详情展示为例，对本实施例的实施过程进行说明，如图2所示，本实施例包括以下步骤：
55.s21、在html页面任意一处创建一个按钮。
56.为了更好地演示效果，展示弹层的起始位置，在html页面的任意一处创建了一个按钮，作为弹层的起始位置。
57.s22、确定弹层在页面中最终展示的位置，这里默认为页面中间。
58.可以根据用户的需求，探测最终展示在页面的任意位置，这里默认一般情况下，弹层在页面中最终展位置为页面的中间。
59.s23、确定弹层在页面中展示的宽度和高度。
60.根据所要展示信息量的密集度及弹层在页面展示的协调性，弹层的宽度和高度在不同场景下应该有着不同的定义，这里采取在浏览器宽度为1440px、高度为980px时，弹层宽度为520px，高度为240px。
61.s24、通过javascript获取弹层缩放的起始位置，利用css给定弹层的位置为fixed，最终确定弹层的缩放效果，通过点击按钮展示弹层从点击处到页面中间的效果。
62.上述fixed，是指元素的位置相对于浏览器窗口是固定的，即使窗口是滚动的，也不会移动。
63.利用css确定弹层的缩放效果，为了更好的展示缩放效果，此时给了弹层一个蓝色的背景色。利用javascript在按钮上添加逻辑事件，即第一次点击按钮时，触发的弹层动画效果是展开，再次点击触发的弹层动画效果是缩回到按钮处。
64.s25、点击按钮时，探层从此位置在0.2s内过渡展示到页面中间，再次点击时弹层从页面中间在0.2s内逐渐缩回到按钮处。
65.具体的，点击按钮时，探层从点击的按钮处在0.2s内过渡展示到页面中间，再次点击时弹层从页面中间到按钮处在0.2s内逐渐消失，最终完成了弹层在html任意一处展现弹层的缩放效果。如果有需要，可以在弹层中实现再次嵌套，即点击弹层中的任意一点，会触
发弹层范围内另一弹层的缩放效果。
66.本实施例所提供一种html页面的弹层缩放展示方法，弹层在页面中缩放效果主要表现在四个方面：
67.1、在按钮位置此时弹层状态为消失，opacity为0，最终呈现在页面中间时，此时为完全展示状态，opacity为1。上述opacity是指一个元素在页面视图中展示出来的可视程度。
68.2、在按钮位置此时弹层并未存在，宽度和高度皆为0，最终呈现在页面中间时，有着固定的宽度和高度。
69.3、要实现弹层在html页面中任意位置的缩放效果，必须确定弹层的初始位置和最终位置，明确弹层偏移量，即在页面中水平方向和竖直方向移动的位置，从而实现弹层的迁移。
70.4、考虑到用户的交互体验，视觉效果，弹层在html页面任意位置缩放时动画效果一致。
71.下面对本技术实施例提供的html页面的弹层缩放展示装置进行介绍，下文描述的html页面的弹层缩放展示装置与上文描述的html页面的弹层缩放展示方法可相互对应参照。
72.如图3所示，本实施例的html页面的弹层缩放展示装置，包括：
73.起始位置确定模块31，用于确定弹层缩放的起始位置；
74.最终位置确定模块32，用于确定弹层缩放的最终位置；
75.展示模块33，用于根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩放动画。
76.在一些具体的实施例中，上述起始位置确定模块用于：
77.根据用户对html页面中dom元素节点的点击操作，确定被点击的dom元素节点的位置，以作为弹层缩放的起始位置。
78.在一些具体的实施例中，上述最终位置确定模块用于：
79.通过读取html页面的源代码，确定弹层缩放的最终位置。
80.在一些具体的实施例中，还包括：
81.展示大小确定模块，用于确定弹层的展示大小，所述展示大小包括高度和宽度。
82.在一些具体的实施例中，上述展示模块用于：
83.创建按钮，并为所述按钮绑定弹层展开事件和弹层缩回事件；
84.在弹层不存在时，响应于用户对所述按钮的点击操作，根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层展开动画；
85.在弹层存在时，响应于用户对所述按钮的点击操作，根据所述起始位置和所述最终位置，利用浏览器内置属性transition展示弹层缩回动画。
86.在一些具体的实施例中，上述展示模块用于：
87.根据所述起始位置和所述最终位置计算弹层的位置偏移量，根据所述位置偏移量，利用浏览器内置属性transition展示弹层缩放动画。
88.在一些具体的实施例中，上述展示模块用于：
89.在预设时间内，根据屏幕刷新率、所述起始位置和所述最终位置，利用浏览器内置
属性transition展示弹层缩放动画。
90.本实施例的html页面的弹层缩放展示装置用于实现前述的html页面的弹层缩放展示方法，因此该装置的具体实施方式可见前文中的html页面的弹层缩放展示方法的实施例部分，这里不再赘述。
91.此外，本技术还提供了一种html页面的弹层缩放展示设备，如图4所示，包括：
92.存储器100：用于存储计算机程序；
93.处理器200：用于执行所述计算机程序，以实现如上文所述的html页面的弹层缩放展示方法。
94.最后，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时用于实现如上文所述的html页面的弹层缩放展示方法。
95.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
96.结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd
‑
rom、或技术领域内所公知的任意其它形式的存储介质中。
97.以上对本技术所提供的方案进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。