CN111596853A - 一种实现滚动指示器的方法、装置、电子设备及存储介质 - Google Patents

一种实现滚动指示器的方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN111596853A
CN111596853A CN202010355881.4A CN202010355881A CN111596853A CN 111596853 A CN111596853 A CN 111596853A CN 202010355881 A CN202010355881 A CN 202010355881A CN 111596853 A CN111596853 A CN 111596853A
Authority
CN
China
Prior art keywords
height
background
layer
page document
width
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202010355881.4A
Other languages
English (en)
Other versions
CN111596853B (zh
Inventor
崔然
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuba Co Ltd
Original Assignee
Wuba Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuba Co Ltd filed Critical Wuba Co Ltd
Priority to CN202010355881.4A priority Critical patent/CN111596853B/zh
Publication of CN111596853A publication Critical patent/CN111596853A/zh
Application granted granted Critical
Publication of CN111596853B publication Critical patent/CN111596853B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种实现滚动指示器的方法、装置、电子设备及存储介质，该方法包括获取页面文档高度、页面文档宽度和当前可视区域高度；将页面文档高度与当前可视区域高度做差处理，得到高度差值；基于高度差值和页面文档宽度，创建覆盖在页面文档的背景层；调用图像渐变属性，对背景层进行上色处理，得到背景图片。调用伪元素，创建位于背景图片表面的蒙层，蒙层的高度小于背景图片的高度，蒙层与背景图片形成预留区域，预留区域用于显示进度条。可见，本发明提供的方法，无需进行大量的计算，实现代码简单，通过创建高度不同的背景层和蒙层，并在背景层中添加颜色，实现滚动指示器中进度条的显示，过程更为简单。

Description

一种实现滚动指示器的方法、装置、电子设备及存储介质
技术领域
本申请涉及网页设计技术领域，尤其涉及一种实现滚动指示器的方法、装置、电子设备及存储介质。
背景技术
Scroll Indicator称之为滚动指示器，用于表征当前可视区域距离页面顶部的占比。滚动指示器可以在用户垂直滚动内容时，在页面顶部实现进度条的效果，例如，当内容滚动到页面最低端时，进度条效果填满整个进度条。
现有技术中，在页面中实现滚动指示器通常采用JavaScript(多范式、解释型的编程语言，简称JS)计算的方式实现。在实现滚动指示器时，实时监控页面内容的滚动事件，并获取屏幕高度和页面中显示的文档高度，利用JS进行计算，来确定滚动时对应的文档进度。
但是，采用JS方法进行计算时，如果页面文档高度较高，会导致计算量较大，使得实现代码相对复杂，比较消耗资源。
发明内容
本申请提供了一种实现滚动指示器的方法、装置、电子设备及存储介质，以解决现有的实现方法的实现过程较为复杂的问题。
第一方面，本申请提供了一种实现滚动指示器的方法，包括以下步骤：
获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度；
将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值；
基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度；
调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的高度与所述背景层的高度相同；
调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。
进一步地，所述背景层为透明的底层；以及，所述调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，包括：
在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角；
调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于所述页面文档的右上角。
进一步地，所述基于高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，包括：
以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。
进一步地，所述调用伪元素，创建位于所述背景图片表面的蒙层，包括：
获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部；
基于所述背景图片的高度和所述进度条的宽度，计算差值；
调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。
第二方面，本申请提供的一种实现滚动指示器的装置，包括：
高度值获取模块，用于获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度；
计算模块，用于将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值；
背景层创建模块，用于基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度；
上色处理模块，用于调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的高度与所述背景层的高度相同；
蒙层创建模块，用于调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。
进一步地，所述背景层为透明的底层；以及，所述上色处理模块，包括：
区域划分单元，用于在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角；
上色处理单元，用于调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于所述页面文档的右上角。
进一步地，所述背景层创建模块，还用于：
以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。
进一步地，所述蒙层创建模块，包括：
宽度获取单元，用于获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部；
差值计算单元，用于基于所述背景图片的高度和所述进度条的宽度，计算差值；
蒙层创建单元，用于调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。
第三方面，本申请提供的一种电子设备，包括：
存储器，用于存储程序指令；
处理器，用于调用并执行所述存储器中的程序指令，以实现第一方面所述的实现滚动指示器的方法。
第四方面，本申请提供的一种存储介质，所述存储介质中存储有计算机程序，当实现滚动指示器的装置的至少一个处理器执行所述计算机程序时，实现滚动指示器的装置执行第一方面所述的实现滚动指示器的方法。
由以上技术方案可知，本发明实施例提供的一种实现滚动指示器的方法、装置、电子设备及存储介质，该方法包括获取页面文档高度、页面文档宽度和当前可视区域高度；将页面文档高度与当前可视区域高度做差处理，得到高度差值；基于高度差值和页面文档宽度，创建覆盖在页面文档的背景层；调用图像渐变属性，对背景层进行上色处理，得到背景图片。调用伪元素，创建位于背景图片表面的蒙层，蒙层的高度小于背景图片的高度，蒙层与背景图片形成预留区域，预留区域用于显示进度条。可见，本发明提供的方法，无需进行大量的计算，实现代码简单，通过创建高度不同的背景层和蒙层，并在背景层中添加颜色，实现滚动指示器中进度条的显示，过程更为简单。
附图说明
为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的实现滚动指示器的方法的流程图；
图2为本发明实施例提供的得到背景图片的方法流程图；
图3为本发明实施例提供的背景图片的示意图；
图4为本发明实施例提供的创建蒙层的方法流程图；
图5(a)为本发明实施例提供的在开始浏览时进度条的示意图；
图5(b)为本发明实施例提供的在浏览中途时进度条的示意图；
图6为本发明实施例提供的实现滚动指示器的装置的结构框图；
图7为本发明实施例提供的电子设备的硬件结构示意图。
具体实施方式
为了模拟滚动指示器，本发明采用纯CSS技术，利用纯CSS生成的动效或动画实现滚动指示器。纯CSS(Cascading Style Sheets，层叠样式表)技术是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
本发明在利用纯CSS技术实现滚动指示器时，无需借助JS，而是利用CSS创建一个容器，在容器中使用CSS中的相关属性配置，实现滚动指示器。该方法实现简单，计算量远小于JS方法，降低性能消耗。
图1为本发明实施例提供的实现滚动指示器的方法的流程图。参见图1，本发明实施例提供的一种实现滚动指示器的方法，执行主体为浏览器，浏览器用于呈现页面，且配置有纯CSS技术。具体地，该方法包括以下步骤：
S1、获取页面文档高度、页面文档宽度和当前可视区域高度，页面文档高度是指页面中展示的文档的总高度，页面文档宽度是指页面中展示的文档的总宽度，当前可视区域高度是指页面中可以看到部分文档对应的窗口高度。
在浏览器中浏览页面时，在页面顶端生成滚动指示器，来表明当前页面的浏览进度。本发明实施例在采用纯CSS技术实现滚动指示器时，需先创建一个容器，而该容器的创建依据为页面文档高度、页面文档宽度和当前可视区域高度。
页面文档高度可表征浏览器中当前呈现的文档的总长度，页面文档高度越高，在按照正常浏览速度进行浏览时，用户浏览文档的时间越长，滚动指示器显示的浏览进度越慢。页面文档宽度可表征浏览器中当前呈现的文档的宽度，该宽度可与浏览器的可视窗口的宽度相同，也可小于可视窗口的宽度。当前可视区域高度可表征浏览器的可视窗口的高度，在可视窗口中，仅能查看到文档的部分内容；随着滑动文档，用户可在可视窗口中查看文档的后续内容。
S2、将页面文档高度与当前可视区域高度做差处理，得到高度差值。
S3、基于高度差值和页面文档宽度，创建覆盖在页面文档的背景层，背景层的高度为高度差值，背景层的宽度为页面文档宽度。
本发明实施例提供的方法，在利用纯CSS技术实现滚动指示器时，需先创建一个容器，该容器为实现滚动指示器的关键。本实施例中，该容器即为背景层，背景层覆盖在页面文档上，背景层是实现浏览进度显示的底层。
在创建背景层时，以浏览器中呈现的页面文档的高度和宽度为创建依据。具体地，先计算页面文档高度和当前可视区域高度的高度差值，再基于高度差值和页面文档宽度，创建背景层。
为保证创建的背景层能覆盖在页面文档上，本实施例中，创建覆盖在页面文档的背景层时，以高度差值作为目标高度，以页面文档宽度作为目标宽度，以页面文档的顶端位置作为起始位置，创建背景层。背景层覆盖在页面文档的表面，且随页面文档的划动，背景层也划动，例如，用户浏览页面文档向上划动时，背景层也向上划动。
背景层的高度为高度差值，背景层的宽度为页面文档宽度，且背景层的顶端与页面文档的顶端重合，背景层的两个侧边与页面文档的两个侧边重合，使得背景层可以与页面文档采用三边对齐的方式贴合在页面文档的表面。
背景层的高度小于页面文档的高度，使得在浏览页面文档的最后一页时，背景层的底端能够划动到文档的顶端，以使进度条效果填满进度条，代表浏览结束。
背景层短于页面文档的高度为一个可视区域的高度，即可视窗口的高度。这是由于滚动指示器在显示浏览进度时，是根据用户浏览页面文档的浏览位置而定。背景层随页面文档的向上划动呈现浏览进度，而当页面文档划动到最后一页，也就是说可视窗口中看到的部分为页面文档的最后一页，背景层短于页面文档一个可视窗口的高度，可以使得在浏览页面文档到底后，背景层可以划动到文档的顶端，填满整个进度条。如果背景层全覆盖在页面文档上，即背景层与页面文档的尺寸相同，那么在当浏览到最后一页时，最后一页上依然覆盖有背景层，使得进度条无法被填满，导致页面文档已浏览结束，但进度条还呈现未浏览结束的状态，出现差错。
为了使背景层呈现填满进度条的效果，本实施例提供的方法，调用纯CSS技术的图像渐变属性，对背景层进行上色，使得在背景层随页面文档划动时，能够呈现动态的进度条显示。
S4、调用图像渐变属性，对背景层进行上色处理，得到背景图片，背景图片的高度与背景层的高度相同。
为了呈现动态的进度条显示，需背景层随页面文档的划动而划动，且为使进度条显示动态进程，需使背景层的一部分呈现颜色，而另一部分无颜色。为此，背景层为透明的底层，虽然背景层覆盖在页面文档的表面，但由于背景层为透明的，因此，也不会对页面文档内容造成遮挡。
在为背景层进行着色处理时，调用纯CSS的图像渐变属性(linear-gradient)设置背景层的颜色，得到背景图片。背景图片在向上划动时，可呈现进度的动态显示。
图2为本发明实施例提供的得到背景图片的方法流程图。参见图2，为使进度条呈现动态显示，本实施例提供的方法，在调用图像渐变属性，对背景层进行上色处理，得到背景图片的过程，包括：
S41、在背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，目标进度展示区域位于页面文档的左下角。
滚动指示器呈现动态的进度条显示时，背景层需一部分带有颜色，另一部分不带有颜色，且两部分的分隔线需为斜线。为此，可将背景层划分为两个部分，以左上角至右下角之间的连续作为分割线，将矩形的背景层划分为两个直角三角形，一个位于左下角，另一个位于右上角。
将位于左下角的直角三角形对应的区域作为目标进度展示区域，该区域用于在背景层滚动时呈现进度条的动态显示，即对目标进度展示区域进行上色处理。
S42、调用图像渐变属性，对目标进度展示区域进行上色处理，得到背景图片，背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，透明的空闲区域位于页面文档的右上角。
利用CSS的图像渐变属性，设置目标进度展示区域的颜色，该颜色需与页面文档的背景颜色进行区分，以便于进度条能够明显突出，便于查看。
图3为本发明实施例提供的背景图片的示意图。如图3所示，在对背景层进行上色处理后，形成的背景图片一部分带有颜色，另一部分为透明。透明的空闲区域位于页面文档的右上角，用于表征进度条未填满状态；带有颜色的目标进度展示区域位于左下角，用于表征进度条填满状态。
S5、调用伪元素，创建位于背景图片表面的蒙层，蒙层的高度小于背景图片的高度，蒙层与背景图片形成预留区域，预留区域用于显示进度条。
由于背景图片呈现一半有颜色一半无颜色的状态，为了防止背景图片对页面文档造成遮挡，也为了使背景图片呈现进度条状态，本实施例中，在背景图片的表面创建一层蒙层。蒙层用于遮挡背景图片，但可以使页面文档的内容显示出来。
在创建蒙层时，蒙层的高度小于背景图片的高度，使蒙层和背景图片呈现预留区域，该预留区域即为背景图片的一部分，将预留区域作为滚动指示器呈现的进度条。蒙层固定不动，不随页面文档的滚动浏览而滚动，使得蒙层与背景图片之间始终存在预留区域，以呈现进度条动态展示的效果。
图4为本发明实施例提供的创建蒙层的方法流程图。参见图4，具体地，本实施例中，调用伪元素，创建位于所述背景图片表面的蒙层的过程，包括：
S51、获取预先设置的进度条的宽度，进度条位于页面文档的顶部。
根据用户浏览页面文档的滚动方向，滚动指示器通常显示在页面文档的顶部，且进度条的宽度可根据实际情况而定，如果设置较宽一些，则蒙层与背景图片之间的高度差值较大一些；如果进度条设置较窄一些，则蒙层与背景图片之间的高度差值较小一些。
S52、基于背景图片的高度和进度条的宽度，计算差值。
S53、调用伪元素，将差值作为目标高度，以背景图片的宽度作为目标宽度，以背景图片的底层为起始位置，在背景图片的表面创建蒙层，蒙层与背景图片形成预留区域，预留区域用于展示进度条。
根据预先设定的进度条的宽度和背景图片的高度，将二者的差值作为蒙层的高度。为了使蒙层能够覆盖住背景图片，将背景图片的宽度作为蒙层的宽度，调用纯CSS中的伪元素，创建蒙层。蒙层位于背景图片的表面，且蒙层的底端与背景图片的底端对齐，使得蒙层的顶端与背景图片的顶端呈现预留区域。
图5(a)为本发明实施例提供的在开始浏览时进度条的示意图；图5(b)为本发明实施例提供的在浏览中途时进度条的示意图。如图5(a)和(b)所示，蒙层与背景图片的底部对齐，上部呈现预留区域，预留区域显示背景图片的目标进度展示区域和空闲区域。
随着页面文档的滚动浏览，背景图片也随之滚动，而蒙层固定不动，使得目标进度展示区域占据预留区域的比例增大，呈现进度条动态展示效果。
由以上技术方案可知，本发明实施例提供的一种实现滚动指示器的方法、装置、电子设备及存储介质，该方法包括获取页面文档高度、页面文档宽度和当前可视区域高度；将页面文档高度与当前可视区域高度做差处理，得到高度差值；基于高度差值和页面文档宽度，创建覆盖在页面文档的背景层；调用图像渐变属性，对背景层进行上色处理，得到背景图片。调用伪元素，创建位于背景图片表面的蒙层，蒙层的高度小于背景图片的高度，蒙层与背景图片形成预留区域，预留区域用于显示进度条。可见，本发明提供的方法，无需进行大量的计算，实现代码简单，通过创建高度不同的背景层和蒙层，并在背景层中添加颜色，实现滚动指示器中进度条的显示，过程更为简单。
图6为本发明实施例提供的实现滚动指示器的装置的结构框图。参见图6，本申请提供的一种实现滚动指示器的装置，用于执行图1所示的实现滚动指示器的方法，该装置包括：高度值获取模块10，用于获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度；计算模块20，用于将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值；背景层创建模块30，用于基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度；上色处理模块40，用于调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的高度与所述背景层的高度相同；蒙层创建模块50，用于调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。
进一步地，所述背景层为透明的底层；以及，所述上色处理模块40，包括：区域划分单元，用于在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角；上色处理单元，用于调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于所述页面文档的右上角。
进一步地，所述背景层创建模块30，还用于：以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。
进一步地，所述蒙层创建模块50，包括：宽度获取单元，用于获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部；差值计算单元，用于基于所述背景图片的高度和所述进度条的宽度，计算差值；蒙层创建单元，用于调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。
图7为本发明实施例提供的电子设备的硬件结构示意图。如图7所示，本申请提供的一种电子设备，包括：存储器601，用于存储程序指令；处理器602，用于调用并执行所述存储器中的程序指令，以实现第一方面所述的实现滚动指示器的方法。
本实施例中，处理器602和存储器601可通过总线或其他方式连接。处理器可以是通用处理器，例如中央处理器、数字信号处理器、专用集成电路，或者被配置成实施本发明实施例的一个或多个集成电路。存储器可以包括易失性存储器，例如随机存取存储器；存储器也可以包括非易失性存储器，例如只读存储器、快闪存储器、硬盘或固态硬盘。
本申请提供的一种存储介质，所述存储介质中存储有计算机程序，当实现滚动指示器的装置的至少一个处理器执行所述计算机程序时，实现滚动指示器的装置执行前述实施例所述的实现滚动指示器的方法。
所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-only memory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。
本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。
本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于实现滚动指示器的装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例中的说明即可。
以上所述的本发明实施方式并不构成对本发明保护范围的限定。

Claims (10)

1.一种实现滚动指示器的方法，其特征在于，包括以下步骤：
获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度；
将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值；
基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度；
调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的高度与所述背景层的高度相同；
调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。
2.根据权利要求1所述的方法，其特征在于，所述背景层为透明的底层；以及，所述调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，包括：
在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角；
调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于所述页面文档的右上角。
3.根据权利要求1所述的方法，其特征在于，所述基于高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，包括：
以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。
4.根据权利要求1所述的方法，其特征在于，所述调用伪元素，创建位于所述背景图片表面的蒙层，包括：
获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部；
基于所述背景图片的高度和所述进度条的宽度，计算差值；
调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。
5.一种实现滚动指示器的装置，其特征在于，包括：
高度值获取模块，用于获取页面文档高度、页面文档宽度和当前可视区域高度，所述页面文档高度是指页面中展示的文档的总高度，所述页面文档宽度是指页面中展示的文档的总宽度，所述当前可视区域高度是指页面中可以看到部分文档对应的窗口高度；
计算模块，用于将所述页面文档高度与所述当前可视区域高度做差处理，得到高度差值；
背景层创建模块，用于基于所述高度差值和所述页面文档宽度，创建覆盖在页面文档的背景层，所述背景层的高度为高度差值，所述背景层的宽度为页面文档宽度；
上色处理模块，用于调用图像渐变属性，对所述背景层进行上色处理，得到背景图片，所述背景图片的高度与所述背景层的高度相同；
蒙层创建模块，用于调用伪元素，创建位于所述背景图片表面的蒙层，所述蒙层的高度小于所述背景图片的高度，所述蒙层与所述背景图片形成预留区域，所述预留区域用于显示进度条。
6.根据权利要求5所述的装置，其特征在于，所述背景层为透明的底层；以及，所述上色处理模块，包括：
区域划分单元，用于在所述背景层中，将从左上到右下形成的直角三角形区域作为目标进度展示区域，所述目标进度展示区域位于页面文档的左下角；
上色处理单元，用于调用图像渐变属性，对所述目标进度展示区域进行上色处理，得到背景图片，所述背景图片包括带有颜色的目标进度展示区域和透明的空闲区域，所述透明的空闲区域位于所述页面文档的右上角。
7.根据权利要求5所述的装置，其特征在于，所述背景层创建模块，还用于：
以所述高度差值作为目标高度，以所述页面文档宽度作为目标宽度，以所述页面文档的顶端位置作为起始位置，创建背景层，所述背景层覆盖在所述页面文档的表面。
8.根据权利要求5所述的装置，其特征在于，所述蒙层创建模块，包括：
宽度获取单元，用于获取预先设置的进度条的宽度，所述进度条位于所述页面文档的顶部；
差值计算单元，用于基于所述背景图片的高度和所述进度条的宽度，计算差值；
蒙层创建单元，用于调用所述伪元素，将所述差值作为目标高度，以所述背景图片的宽度作为目标宽度，以所述背景图片的底层为起始位置，在所述背景图片的表面创建蒙层，所述蒙层与所述背景图片形成预留区域，所述预留区域用于展示进度条。
9.一种电子设备，其特征在于，包括：
存储器，用于存储程序指令；
处理器，用于调用并执行所述存储器中的程序指令，以实现权利要求1～4任一项所述的实现滚动指示器的方法。
10.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，当实现滚动指示器的装置的至少一个处理器执行所述计算机程序时，实现滚动指示器的装置执行权利要求1～4任一项所述的实现滚动指示器的方法。
CN202010355881.4A 2020-04-29 2020-04-29 一种实现滚动指示器的方法、装置、电子设备及存储介质 Active CN111596853B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010355881.4A CN111596853B (zh) 2020-04-29 2020-04-29 一种实现滚动指示器的方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010355881.4A CN111596853B (zh) 2020-04-29 2020-04-29 一种实现滚动指示器的方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN111596853A true CN111596853A (zh) 2020-08-28
CN111596853B CN111596853B (zh) 2021-09-07

Family

ID=72185633

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010355881.4A Active CN111596853B (zh) 2020-04-29 2020-04-29 一种实现滚动指示器的方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN111596853B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112306616A (zh) * 2020-11-23 2021-02-02 北京百家科技集团有限公司 一种加载显示处理方法、装置、计算机设备和存储介质
CN112579083A (zh) * 2020-12-09 2021-03-30 京东数字科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN113934340A (zh) * 2021-09-22 2022-01-14 青岛海信移动通信技术股份有限公司 一种终端设备和进度条显示方法

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060236262A1 (en) * 2005-04-15 2006-10-19 Microsoft Corporation Tactile scroll bar with illuminated document position indicator
US20080077855A1 (en) * 2006-09-21 2008-03-27 Shirel Lev Generic website
US20090138815A1 (en) * 2007-11-26 2009-05-28 Palm, Inc. Enhancing visual continuity in scrolling operations
US8196061B1 (en) * 2008-12-30 2012-06-05 Intuit Inc. Method and system for providing scroll bar enabled bookmarks in electronic document displays
CN103823651A (zh) * 2014-02-17 2014-05-28 联想(北京)有限公司 一种信息处理的方法及电子设备
CN104636038A (zh) * 2015-01-28 2015-05-20 桂林长海发展有限责任公司 一种自绘滑动条的系统及方法
CN106293409A (zh) * 2016-08-12 2017-01-04 福建中金在线信息科技有限公司 一种轻量级滚动条的美化方法
CN106990951A (zh) * 2017-02-22 2017-07-28 福建天泉教育科技有限公司 一种进度条的绘制方法及系统
CN107908793A (zh) * 2017-12-13 2018-04-13 上海携程商务有限公司 网页弹窗的方法及系统
US20190114316A1 (en) * 2016-08-25 2019-04-18 Oracle International Corporation Data grid components
CN109901894A (zh) * 2017-12-07 2019-06-18 腾讯科技（深圳）有限公司 一种进度条图像生成方法、装置和存储介质

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060236262A1 (en) * 2005-04-15 2006-10-19 Microsoft Corporation Tactile scroll bar with illuminated document position indicator
US20080077855A1 (en) * 2006-09-21 2008-03-27 Shirel Lev Generic website
US20090138815A1 (en) * 2007-11-26 2009-05-28 Palm, Inc. Enhancing visual continuity in scrolling operations
US8196061B1 (en) * 2008-12-30 2012-06-05 Intuit Inc. Method and system for providing scroll bar enabled bookmarks in electronic document displays
CN103823651A (zh) * 2014-02-17 2014-05-28 联想(北京)有限公司 一种信息处理的方法及电子设备
CN104636038A (zh) * 2015-01-28 2015-05-20 桂林长海发展有限责任公司 一种自绘滑动条的系统及方法
CN106293409A (zh) * 2016-08-12 2017-01-04 福建中金在线信息科技有限公司 一种轻量级滚动条的美化方法
US20190114316A1 (en) * 2016-08-25 2019-04-18 Oracle International Corporation Data grid components
CN106990951A (zh) * 2017-02-22 2017-07-28 福建天泉教育科技有限公司 一种进度条的绘制方法及系统
CN109901894A (zh) * 2017-12-07 2019-06-18 腾讯科技（深圳）有限公司 一种进度条图像生成方法、装置和存储介质
CN107908793A (zh) * 2017-12-13 2018-04-13 上海携程商务有限公司 网页弹窗的方法及系统

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112306616A (zh) * 2020-11-23 2021-02-02 北京百家科技集团有限公司 一种加载显示处理方法、装置、计算机设备和存储介质
CN112306616B (zh) * 2020-11-23 2023-09-29 北京百家科技集团有限公司 一种加载显示处理方法、装置、计算机设备和存储介质
CN112579083A (zh) * 2020-12-09 2021-03-30 京东数字科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN112579083B (zh) * 2020-12-09 2024-05-17 京东科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN113934340A (zh) * 2021-09-22 2022-01-14 青岛海信移动通信技术股份有限公司 一种终端设备和进度条显示方法
CN113934340B (zh) * 2021-09-22 2024-04-19 青岛海信移动通信技术有限公司 一种终端设备和进度条显示方法

Also Published As

Publication number Publication date
CN111596853B (zh) 2021-09-07

Similar Documents

Publication Publication Date Title
CN111596853B (zh) 一种实现滚动指示器的方法、装置、电子设备及存储介质
US9195637B2 (en) Proportional font scaling
US8266522B2 (en) Method and device for temporally displaying advertising content on a webpage
US9418068B2 (en) Dimensional conversion in presentations
CN107239287B (zh) 一种网页显示方法、装置、电子设备及存储介质
US20130254643A1 (en) Digital Content Enhancement Platform
US20230367953A1 (en) Display rendering method and system
CN112835499B (zh) 一种轮播图展示方法、装置、设备及介质
CN107977150A (zh) 一种视图滚动方法、装置以及电子设备
CN113467871A (zh) H5页面展示方法、装置、设备及存储介质
WO2014036927A1 (zh) 一种页面遮罩的实现方法及装置
US20150103092A1 (en) Continuous Image Optimization for Responsive Pages
CN107707965B (zh) 一种弹幕的生成方法和装置
CN105930464A (zh) Web富媒体跨屏适配方法和装置
CN108228121B (zh) 一种浏览器分屏的方法、装置及移动终端
CN112764752A (zh) 页面的展示方法和装置、存储介质、电子装置
CN109992736A (zh) 网页动态加载效果实现方法、装置、终端和存储介质
CN109299449A (zh) 表格处理方法、装置、电子设备及可读存储介质
CN115563418A (zh) 页面自适应布局方法、页面信息生成方法及相关装置
CN111970570B (zh) 一种提示视频内容互动位置的方法及装置
CN113096217B (zh) 图片生成方法、装置、电子设备以及存储介质
CN106488314A (zh) 一种弹幕渲染方法
CN111143734A (zh) 一种页面添加效果元素的方法及系统
CN111563157A (zh) 一种缩略图的显示方法和装置
CN106156371B (zh) 一种实现网页完整背景图的方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant