CN106202097A - 图片展示方法和装置 - Google Patents
图片展示方法和装置 Download PDFInfo
- Publication number
- CN106202097A CN106202097A CN201510224703.7A CN201510224703A CN106202097A CN 106202097 A CN106202097 A CN 106202097A CN 201510224703 A CN201510224703 A CN 201510224703A CN 106202097 A CN106202097 A CN 106202097A
- Authority
- CN
- China
- Prior art keywords
- picture
- preset
- preset element
- display
- displaying
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 230000002452 interceptive effect Effects 0.000 claims abstract description 12
- 230000008859 change Effects 0.000 claims description 7
- 238000001514 detection method Methods 0.000 claims description 7
- 230000008569 process Effects 0.000 abstract description 13
- 230000003993 interaction Effects 0.000 abstract description 7
- 241000699666 Mus <mouse, genus> Species 0.000 description 29
- 230000001960 triggered effect Effects 0.000 description 11
- 230000000694 effects Effects 0.000 description 9
- 230000007423 decrease Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 230000008878 coupling Effects 0.000 description 4
- 238000010168 coupling process Methods 0.000 description 4
- 238000005859 coupling reaction Methods 0.000 description 4
- 230000006399 behavior Effects 0.000 description 2
- 230000001934 delay Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种图片展示方法,包括:在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态,所述预设元素是用于展示所述至少一张图片的交互式页面元素;检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片。增强了网页图片展示与用户浏览过程之间的互动。
Description
技术领域
本发明属于互联网领域,具体地说,涉及一种图片展示方法和装置。
背景技术
浏览器是指可以显示网页服务器或者文件系统的HTML(超文本标记语言,HyperText Mark-up Language)文件内容,并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页,这些网页由URL(统一资源定位符,Uniform Resource Locator)指定,文件格式通常为HTML。一个网页中可以包括多个文档,每个文档都是分别从服务器获取的。HTTP内容类型和URL协议规范允许网页设计在网页中嵌入图片、视频等。
在互联网网页中,图片被越来越多的用来展示网页内容。现有的网页中,图片通常以平铺的方式直接在网页中显示,或者以图集的方式集中显示在网页中的某个区域。上述展示方式只是单纯的进行直接展示,与用户在网页中的浏览行为和关注点无关,缺乏与用户浏览网页过程的互动。
发明内容
有鉴于此,本申请提供了一种图片展示方法和装置,解决了网页图片的展示与用户的浏览行为之间缺乏互动的技术问题。
为了解决上述技术问题,本申请公开了一种图片展示方法,包括:在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态,所述预设元素是用于展示所述至少一张图片的交互式页面元素;检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片。
所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:检测到所述接触操作时触发计时器计算第一延时;当所述第一延时大于第一预设时长时,展示与所述预设元素对应的至少一张图片;或者,检测到所述接触操作已结束时触发计时器计算第二延时;当所述第二延时大于第二预设时长时,展示与所述预设元素对应的至少一张图片;或者,检测到所述接触操作是持续的接触操作时,触发计时器计算所述接触操作的第一持续时长;当所述接触操作的第一持续时长大于第三预设时长时,展示与所述预设元素对应的至少一张图片。
所述在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态包括:将所述至少一张图片设置在所述预设元素的下一层,并被所述预设元素所遮盖;所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:移动所述至少一张图片至所述预设元素周围的展示位置进行展示,其中所述展示位置在所述预设元素的同一层。
所述在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态包括:将所述至少一张图片设置在所述预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态;所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:逐渐降低所述至少一张图片的透明度,将所述至少一张图片展示在所述展示位置。
所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:当所述至少一张图片为多张图片时,根据所述多张图片预设的展示顺序,依次展示所述多张图片。
所述方法还包括:所述多张图片的展示顺序或者展示位置,随着触发相应页面的频率由高到低的顺序的变化而调整。
所述方法还包括:展示与所述预设元素对应的至少一张图片时,触发计时器计算展示所述至少一张图片的第二持续时长,当所述第二持续时长大于第四预设时长时,重置所述至少一张图片为所述隐藏状态。
所述检测到针对所述预设元素的接触操作包括:检测到鼠标与所述预设元素的接触操作;或者,检测到手势与所述预设元素的接触操作。
为了解决上述技术问题,本申请还公开了一种图片展示装置,包括:第一展示模块,用于在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态,所述预设元素是用于展示所述至少一张图片的交互式页面元素;第二展示模块,用于检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片。
所述第二展示模块包括:第一计时子模块,用于检测到所述接触操作时触发计时器计算第一延时;第一展示子模块,用于当所述第一延时大于第一预设时长时,展示与所述预设元素对应的至少一张图片;或者,第二计时子模块,用于检测到所述接触操作已结束时触发计时器计算第二延时;第二展示子模块,用于当所述第二延时大于第二预设时长时,展示与所述预设元素对应的至少一张图片;或者,第三计时子模块,用于检测到所述接触操作是持续的接触操作时,触发计时器计算所述接触操作的第一持续时长;第三展示子模块,用于当所述接触操作的第一持续时长大于第三预设时长时,展示与所述预设元素对应的至少一张图片。
所述第一展示模块包括:第一处理子模块,将所述至少一张图片设置在所述预设元素的下一层,并被所述预设元素所遮盖;所述第二展示模块包括:第四展示子模块,用于移动所述至少一张图片至所述预设元素周围的展示位置进行展示,其中所述展示位置在所述预设元素的同一层。
所述第一展示模块包括:第二处理子模块,用于将所述至少一张图片设置在所述预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态;所述第二展示模块包括:第五展示子模块,用于逐渐降低所述至少一张图片的透明度,将所述至少一张图片展示在所述展示位置。
所述第二展示模块包括:第六展示子模块,用于当所述至少一张图片为多张图片时,根据所述多张图片预设的展示顺序,依次展示所述多张图片。
所述装置还包括:调整模块,用于所述多张图片的展示顺序或者展示位置,随着触发相应页面的频率由高到低的顺序的变化而调整。
所述装置还包括:计时模块,用于展示与所述预设元素对应的至少一张图片时,触发计时器计算展示所述至少一张图片的第二持续时长,重置模块,用于当所述第二持续时长大于第四预设时长时,重置所述至少一张图片为所述隐藏状态。
所述第二展示模块包括:第一检测子模块,用于检测到鼠标与所述预设元素的接触操作;或者,第二检测子模块,用于检测到手势与所述预设元素的接触操作。
与现有技术相比,本申请可以获得包括以下技术效果:
1)在网页中展示用于用户交互的预设元素,检测到针对该预设元素的接触操作时,展示与该预设元素对应的至少一张图片,将网页图片的展示与用户的浏览过程建立联系,增强了网页图片的展示与用户的浏览过程之间的互动。
2)对隐藏在预设元素周围的图片可设置多种展示效果,有助于提升用户对于图片内容的关注度,吸引用户点击。
当然,实施本申请的任一产品必不一定需要同时达到以上所述的所有技术效果。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是本申请实施例提供的一种图片展示方法的流程示意图;
图2(a)-(c)是本申请实施例预设元素与对应的图片相对位置示意图;
图3(a)-(b)是本申请实施例预设元素与对应的图片相对位置示意图;
图4本申请实施例提供的一种图片展示方法的流程示意图;
图5(a)-(e)是本申请实施例鼠标触发图片展示的过程示意图;
图6(a)-(f)是本申请实施例手势触发图片展示的过程示意图;
图7是本申请实施例提供的一种图片展示装置的结构示意图。
具体实施方式
以下将配合附图及实施例来详细说明本发明的实施方式,藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。
图1是本申请实施例提供的一种图片展示方法的流程示意图,适用于终端设备,包括以下步骤。
在步骤S101中,在网页中展示预设元素,与预设元素对应的至少一张图片处于隐藏状态,预设元素是用于展示该至少一张图片的交互式页面元素。
该预设元素是网页中的文字、图片、动画、视频和链接中的任意一种元素,在一个网页中可同时包含多个预设元素。每个预设元素对应至少一张图片。终端设备显示该网页时,网页中包含至少一个预设元素,此时用户浏览到的网页与现有网页相同,但用户并不知道网页中的哪些元素是预设元素,网页中的每个预设元素所对应的至少一张图片处于隐藏状态,用户看不到每个预设元素所对应的至少一张图片。该预设元素是一种交互式页面元素,能够检测到来自用户的接触操作并且展示该预设元素对应的至少一张图片,在预设元素周围设置有与至少一张图片对应的显示位置,以在该显示位置来显示该至少一张图片。
其中,将预设元素对应的至少一张图片设置为隐藏状态,至少可通过以下方式来实现。
A1、将至少一张图片设置在预设元素的下一层,并被预设元素所遮盖。
在网页中预设元素的显示区域,设置与该预设元素对应的至少一张图片。该至少一张图片设置所在的显示图层位于该预设元素所在的显示图层的下一层,因此能够被该预设元素所遮盖。例如,设置预设元素所在的显示图层z-index:0,该预设元素对应的至少一张图片所在的显示图层z-index:-1,则该至少一张图片所在的显示图层位于该预设元素所在图层的下一层,同时通过对像素点参数的设置,使与该预设元素对应的至少一张图片被该预设元素所遮盖。如图2(a)所示,网页10包括预设元素11,预设元素11对应图片110、图片111和图片112。图片110、图片111和图片112被预设元素10所遮盖。预设元素10周围设置相应的三个展示位置,其中图片110对应展示位置120,图片111对应展示位置121,图片112对应展示位置122。
A2、将至少一张图片设置在预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态。
预设元素周围设有该至少一张图片对应的展示位置,将该预设元素对应的至少一张图片设置在相应的展示位置处,同时通过对该至少一张图片的透明度的设置使该至少一张图片处于隐藏状态,例如将该至少一张图片的透明度设置为100%。如图3(a)所示,网页20包括预设元素21,预设元素21对应图片210、图片211和图片212。其中,图片210对应展示位置220,图片211对应展示位置221,图片212对应展示位置222。图片210、图片211和图片212和分别被设置在对应的展示位置,并且其透明度被设置为100%,使图片210、图片211和图片212隐藏在对应的展示位置。
在步骤S102中,检测到针对预设元素的接触操作后,展示与预设元素对应的至少一张图片。
该接触操作是用户针对该预设元素的交互操作,包括用户鼠标对该预设元素的接触操作以及用户手势与该预设元素的接触操作,可认为用户在浏览网页的过程中已经浏览或关注到该预设元素。对该接触操作的检测可通过检测相应的系统事件来实现。
用户使用个人计算机(PC)通过PC端浏览器浏览网页,用户对网页的操作通常来自鼠标操作,计算机检测鼠标与网页中预设元素的接触操作。用户鼠标进入该预设元素所覆盖的显示区域时,计算机检测到针对该预设元素的鼠标事件,例如mouseover事件。而当用户使用具有触摸显示屏的电子设备浏览网页时,用户对网页的操作通常来自于用户手势在触摸显示屏上的触摸操作,电子设备检测用户手势与该预设元素的接触操作。用户手势接触到触摸显示屏所显示网页中的预设元素时,电子设备检测到用户手势针对该预设元素的触控事件,例如touchstart事件。
终端设备检测到针对预设元素的接触操作后,会触发与该预设元素对应的至少一张图片的展示,其触发方式至少包括以下任意一种。
B1、检测到接触操作时触发计时器计算第一延时;当第一延时大于第一预设时长时,展示与预设元素对应的至少一张图片。终端设备检测到针对预设元素的接触操作后,例如检测到用户鼠标的mouseover事件或者用户手势的touchstart事件,触发计时器计算第一延时,例如触发hoverdelay()方法计算第一延时。无论针对该预设元素的接触操作是否持续,该计时器都会持续计算第一延时,当第一延时大于第一预设时长(例如,500ms)时,展示该至少一张图片。
B2、检测到接触操作已结束时触发计时器计算第二延时;当第二延时大于第二预设时长时,展示与预设元素对应的至少一张图片。终端设备检测到对预设元素的接触操作时,并不触发计时器,而是在与该预设元素的接触操作结束后,在触发计时器计算第二延时。例如,用户鼠标或者用户手势移入预设元素的显示区域时,并不会触发计时器,当用户鼠标离开预设元素的显示区域时,检测到相应的mouseover事件结束,当用户手势离开预设元素的显示区域时,检测到touchend事件。此时再开始计算第二延时,当第二延时大于第二预设时长时,展示该至少一张图片。例如,终端设备通过hoverout:t来设置该第二预设时长,hoverout:300,代表该第二预设时长为300ms,当用户鼠标或用户手势已移出该预设元素,并在300ms后开始展示该预设元素对应的至少一张图片。
B3、检测到接触操作是持续的接触操作时,触发计时器计算接触操作的第一持续时长;当接触操作的第一持续时长大于第三预设时长时,展示与预设元素对应的至少一张图片。终端设备检测到针对预设元素的接触操作后,例如检测到用户鼠标的mouseover事件或者用户手势的touchstart事件,触发计时器计算第一持续时长,与B1的方式不同的是,用户手势或者用户鼠标移出预设元素的显示区域后,会导致该计时器清零,用户手势或用户鼠标保持在预设元素的显示区域内时,该计时器才会连续计算该第一持续时长。当该第一持续时长超过第三预设时长时,会展示该至少一张图片。例如终端设备通过hoverduring:t来设置该第三预设时长,hoverduring:1000,代表检测到的接触操作需要持续1000ms,用户鼠标或者用户手势移入该预设元素并且保持在该预设元素的显示区域内超过1000ms时,展示与该预设元素对应的至少一张图片。
终端设备在展示与预设元素对应的至少一张图片时,基于该至少一张图片的不同设置方式,会产生不同的展示效果。
C1、基于步骤S101中A1的设置方式,终端设备在展示与预设元素对应的至少一张图片时,移动该至少一张图片至预设元素周围的展示位置进行展示,其中所述展示位置在所述预设元素的同一层。如图2(b)所示,位于预设元素10下一层的图片110、图片111和图片112开始分别向各自对应的展示位置120、展示位置121和展示位置122开始移动,并最终如图2(c)填充到相应的展示位置中进行展示。同时,图片110、图片111和图片112在移入相应的展示位置120、展示位置121和展示位置122时,所在显示图层由z-index:-1变为z-index:0,在预设元素10的同一层,不会再被预设元素和其他同层的网页元素所遮盖。从用户角度能够看到图片110、图片111和图片112从预设元素10的显示区域内移出,并最终移动到预设元素10周围进行展示。
C2、基于步骤S101中A2的设置方式,终端设备展示与预设元素对应的至少一张图片时,降低该至少一张图片的透明度,将该至少一张图片展示在对应的展示位置。图片210、图片211和图片212分别设置于相应的展示位置220、展示位置221和展示位置222中,透明度设置为100%而处于隐藏状态。如图3(b)所示,直接降低所述图片210、图片211和图片212的透明度至0%,从而在相应的展示位置展示出图片210、图片211和图片212。在另外一种展示方式中,图片210、图片211和图片212的透明度逐渐降低,从而使图片210、图片211和图片212以隐现的方式逐渐清晰的显示在相应的展示位置。
在以上所述的C1和C2两种展示方式中,当与预设元素对应的至少一张图片是多张图片时,可进一步对与该预设元素对应的多张图片预设展示顺序,可通过JS脚本程序来实现,例如在JS脚本程序中采用setTimeout()方法来控制多张图片的展示顺序,设置setTimeout(F(n),time),其中n代表图片编号,time代表与开始展示该多张图片这一时刻的时间间隔,如将time设置为0,则在开始展示该至少一张图片这一时刻立即展示该图片,将time设置为300,则在开始展示该至少一张图片这一时刻之后300ms时开始展示该图片。按照预设的展示顺序依次展示与预设元素对应的多张图片,能够进一步吸引用户浏览每一张图片的内容,达到更佳的展示效果。在一个实施例中,与预设元素对应的多张图片中,每张图片都是一个图片链接,作为相应网页的触发入口,网页内容服务器每隔预设周期统计该多张图片触发相应网页的频率,并根据该多张图片触发相应网页的频率由高到低的顺序调整该多张图片的展示顺序,将触发相应网页的频率更高的图片优先展示。或者,根据该多张图片触发相应网页的频率由高到低的顺序调整该多张图片的展示位置,将触发相应网页的频率更高的图片调整到优先展示的展示位置。因此,从用户视角能够察觉到该多张图片的展示顺序或者展示位置会出现调整,而实际上是随着触发相应页面的频率由高到低的顺序的变化而调整的。
在一个实施例中,如图4所示,该图片展示方法进一步包括以下步骤。
在步骤S301中,在网页中展示预设元素,与预设元素对应的至少一张图片处于隐藏状态,预设元素是用于展示至少一张图片的交互式页面元素。
在步骤S302中,检测到针对预设元素的接触操作后,展示与预设元素对应的至少一张图片。
在步骤S303中,展示与预设元素对应的至少一张图片时,触发计时器计算展示至少一张图片的第二持续时长。
终端设备开始展示与预设元素对应的至少一张图片时,触发计时器来计算展示该至少一张图片的第二持续时长,即与预设元素对应的至少一张图片的展示在网页中将持续一段时间。
在步骤S304中,当第二持续时长大于第四预设时长时,重置所述至少一张图片为所述隐藏状态。
例如,该第四预设时长为20秒,则展示与预设元素对应的至少一张图片的第二持续时长超过20秒时,重置该至少一张图片至步骤S301中的隐藏状态,此时网页中仍只能浏览到预设元素。在第二持续时长之内保持与预设元素对应的至少一张图片的显示,便于用户点击该至少一张图片以进入这些图片所链接的网页。
本申请实施例建立了网页图片的展示与用户的浏览过程和关注点之间的联系,构建了一种交互式的网页图片展示方式,使网页图片的展示与用户的网页浏览过程形成互动。
下面通过应用实例对本申请做进一步说明。
如图5(a)所示,在网页中的一个预设元素40周围设置三张图片,分别为图片410、图片411和图片412。这三张图片的展示位置可以被设置在预设元素40的任意一侧,在图5(a)-图5(e)中,这三张图片的展示位置设置在预设元素40的右侧并且对齐排列,以进行示例性说明。将图片410、图片411和图片412分别设置在相应的展示位置,并且透明度设置为100%从而处于隐藏状态。图5(a)中的虚线表示此时图片410、图片411和图片412为隐藏状态。如图5(b)所示,浏览器打开该网页时,用户只能看到预设元素40,而看不到图片410、图片411和图片412。终端设备检测到针对该预设元素40的接触操作,该接触操作来自用户的鼠标操作,例如,终端设备检测到针对该预设元素的mouseover事件。如图5(c)所示,用户鼠标移入到该预设元素40的显示区域时,终端设备检测到mouseover事件。此时终端设备包括以下三种可能:
(1)终端设备检测到该mouseover事件时触发计时器开始计算第一延时,即鼠标如图5(c)所示移入预设元素40后,无论鼠标移动至网页何处,都会持续计算该第一延时,当第一延时大于第一预设时长时,终端设备开始展示处于隐藏状态的图片410、图片411和图片412;
(2)终端设备检测到该mouseover事件并且用户鼠标如图5(d)所示已离开该预设元素40,终端设备检测到该mouseover事件结束时触发计时器开始计算第二延时,无论鼠标移动至网页何处,都会持续计算该第二延时,即用户鼠标从该预设元素40的显示区域先移入,再移出,在用户鼠标移出时开始计算第二延时。当第二延时大于第二预设时长时,终端设备开始展示处于隐藏状态的图片410、图片411和图片412;
(3)终端设备检测到该mouseover事件时触发计时器计算该mouseover事件的第一持续时间,如果用户鼠标移出预设元素40的显示区域,则计时器停止计算该第一持续时间。当第一持续时长大于第三预设时长时,即用户鼠标的移动范围如图5(c)所示一直保持在预设元素40的显示区域内,终端设备开始展示处于隐藏状态的图片410、图片411和图片412。
图片410、图片411和图片412的透明度开始逐渐降低,最终达到0%,使这三张图片显示在相应的展示位置。此时,可以对图片410、图片411和图片412逐渐降低透明度的展示方式设置等间隔延迟,例如,设置图片410开始降低透明度进行显示的时间setTimeout(F(1),0),图片411开始降低透明度进行显示的时间setTimeout(F(2),200),图片412开始降低透明度进行显示的时间setTimeout(F(3),400),即图片410、图片411和图片412开始降低透明度进行显示的时间间隔为200ms。图片410、图片411和图片412的最终展示效果,如图5(e)所示。用户将鼠标移入预设元素40,认为用户已浏览或关注到预设元素40,此时将预设元素40对应的图片进行展示,从而建立起网页图片展示与用户浏览过程之间的联系,增强了网页图片展示与用户浏览过程之间的互动。
在另一个应用实例中,如图6(a)所示,在网页中的一个预设元素50所在的显示图层的下一层设置三张图片,分别为图片510、图片511和图片512。这三张图片全部被预设元素50所遮盖,用户无法看到该预设元素50下的这三张图片。这三张图片的展示位置设置在预设元素50的右侧并且对齐排列,以进行示例性说明。如图6(b)所示,浏览器打开该网页时,用户只能看到预设元素50,而看不到图片510、图片511和图片512。终端设备的触摸显示屏检测到针对该预设元素50的接触操作,该接触操作来自用户的手势操作,例如,终端设备检测到针对预设元素50的touchstart事件。如图6(c)所示,用户手势在触摸显示屏上移入到该预设元素50的显示区域时,终端设备检测到touchstart事件。此时终端设备包括以下三种可能:
(1)终端设备检测到该touchstart事件时触发计时器开始计算第一延时,即鼠标如图6(c)所示移入预设元素50后,无论用户手势移动至何处,都会持续计算该第一延时,当第一延时大于第一预设时长时,终端设备开始展示处于隐藏状态的图片510、图片511和图片512;
(2)终端设备检测到该touchstart事件并且用户手势如图6(d)所示已离开该预设元素50,终端设备检测到针对该预设元素50的touchstart事件时触发计时器开始计算第二延时,无论用户手势移动至网页何处,都会持续计算该第二延时,即用户手势从预设元素50的显示区域先移入,再移出,在用户手势移出时开始计算第二延时。当第二延时大于第二预设时长时,终端设备开始展示处于隐藏状态的图片510、图片511和图片512;
(3)终端设备检测到针对预设元素50的touchstart事件时触发计时器计算touchstart事件的第一持续时长,用户手势移出预设元素50的显示区域时,计时器停止计算第一持续时长。当第一持续时长大于第三预设时长时,即用户手势的移动范围如图6(c)所示一直保持在预设元素50的显示区域内,终端设备开始展示处于隐藏状态的图片510、图片511和图片512。
图片510、图片511和图片512开始从预设元素50的下一层向各自对应的展示位置开始移动,直到移动到对应的展示位置。用户会看到这三张图片从预设元素50右侧滑出进行展示。同理,也可以对图片510、图片511和图片512从预设元素50右侧滑出的展示方式设置等间隔延迟。例如,如图6(e)所示,图片510、图片511和图片512从预设元素50的右侧以200ms的时间间隔依次滑出展示。图片510、图片511和图片512全部滑出后的展示效果如图6(f)所示。用户手势移入到预设元素50,认为用户已浏览或关注到预设元素50,此时将预设元素50对应的图片进行展示,建立起网页图片展示与用户浏览过程之间的联系,增强了网页图片展示与用户浏览过程之间的互动。
图7是本申请实施例提供的一种图片展示装置,包括:
第一展示模块60,用于在网页中展示预设元素,与预设元素对应的至少一张图片处于隐藏状态,预设元素是用于展示至少一张图片的交互式页面元素;
第二展示模块61,用于检测到针对预设元素的接触操作后,展示与预设元素对应的至少一张图片。
在一个实施例中,该第二展示模块61包括:
第一计时子模块,用于检测到接触操作时触发计时器计算第一延时;
第一展示子模块,用于当第一延时大于第一预设时长时,展示与预设元素对应的至少一张图片。
或者,该第二展示模块61包括:
第二计时子模块,用于检测到接触操作已结束时触发计时器计算第二延时;
第二展示子模块,用于当第二延时大于第二预设时长时,展示与预设元素对应的至少一张图片。
或者,该第二展示子模块61包括:
第三计时子模块,用于检测到接触操作是持续的接触操作时,触发计时器计算接触操作的第一持续时长;
第三展示子模块,用于当接触操作的第一持续时长大于第三预设时长时,展示与预设元素对应的至少一张图片。
在一个实施例中,该第一展示模块60包括:
第一处理子模块,将至少一张图片设置在预设元素的下一层,并被预设元素所遮盖;
该第二展示模块61包括:
第四展示子模块,用于移动至少一张图片至预设元素周围的展示位置进行展示,其中展示位置在预设元素的同一层。
在一个实施例中,该第一展示模块60包括:
第二处理子模块,用于将至少一张图片设置在预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态;
该第二展示模块61包括:
第五展示子模块,用于逐渐降低至少一张图片的透明度,将至少一张图片展示在展示位置。
在一个实施例中,该第二展示模块61包括:
第六展示子模块,用于当至少一张图片为多张图片时,根据多张图片预设的展示顺序,依次展示多张图片。
该装置还包括:
调整模块,用于多张图片的展示顺序或者展示位置,随着触发相应页面的频率由高到低的顺序的变化而调整。
在一个实施例中,该装置还包括:
计时模块62,用于展示与预设元素对应的至少一张图片时,触发计时器计算展示至少一张图片的第二持续时长,
重置模块63,用于当第二持续时长大于第四预设时长时,重置至少一张图片为隐藏状态。
在一个实施例中,该第二展示模块61包括:
第一检测子模块,用于检测到鼠标与预设元素的接触操作。
或者,该第二展示模块61包括:
第二检测子模块,用于检测到手势与预设元素的接触操作。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
如在说明书及权利要求当中使用了某些词汇来指称特定组件。本领域技术人员应可理解,硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求并不以名称的差异来作为区分组件的方式,而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求当中所提及的“包含”为一开放式用语,故应解释成“包含但不限定于”。“大致”是指在可接收的误差范围内,本领域技术人员能够在一定误差范围内解决所述技术问题,基本达到所述技术效果。此外,“耦接”一词在此包含任何直接及间接的电性耦接手段。因此,若文中描述一第一装置耦接于一第二装置,则代表所述第一装置可直接电性耦接于所述第二装置,或通过其他装置或耦接手段间接地电性耦接至所述第二装置。说明书后续描述为实施本发明的较佳实施方式,然所述描述乃以说明本发明的一般原则为目的,并非用以限定本发明的范围。本发明的保护范围当视所附权利要求所界定者为准。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的商品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。
上述说明示出并描述了本发明的若干优选实施例,但如前所述,应当理解本发明并非局限于本文所披露的形式,不应看作是对其他实施例的排除,而可用于各种其他组合、修改和环境,并能够在本文所述发明构想范围内,通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围,则都应在本发明所附权利要求的保护范围内。
Claims (16)
1.一种图片展示方法,其特征在于,包括:
在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态,所述预设元素是用于展示所述至少一张图片的交互式页面元素;
检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片。
2.如权利要求1所述的方法,其特征在于,所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:
检测到所述接触操作时触发计时器计算第一延时;
当所述第一延时大于第一预设时长时,展示与所述预设元素对应的至少一张图片;或者,
检测到所述接触操作已结束时触发计时器计算第二延时;
当所述第二延时大于第二预设时长时,展示与所述预设元素对应的至少一张图片;或者,
检测到所述接触操作是持续的接触操作时,触发计时器计算所述接触操作的第一持续时长;
当所述接触操作的第一持续时长大于第三预设时长时,展示与所述预设元素对应的至少一张图片。
3.如权利要求1所述的方法,其特征在于,所述在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态包括:
将所述至少一张图片设置在所述预设元素的下一层,并被所述预设元素所遮盖;
所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:
移动所述至少一张图片至所述预设元素周围的展示位置进行展示,其中所述展示位置在所述预设元素的同一层。
4.如权利要求1所述的方法,其特征在于,所述在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态包括:
将所述至少一张图片设置在所述预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态;
所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:
逐渐降低所述至少一张图片的透明度,将所述至少一张图片展示在所述展示位置。
5.如权利要求1所述的方法,其特征在于,所述检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片包括:
当所述至少一张图片为多张图片时,根据所述多张图片预设的展示顺序,依次展示所述多张图片。
6.如权利要求5所述的方法,其特征在于,所述方法还包括:
所述多张图片的展示顺序或者展示位置,随着触发相应页面的频率由高到低的顺序的变化而调整。
7.如权利要求1所述的方法,其特征在于,所述方法还包括:
展示与所述预设元素对应的至少一张图片时,触发计时器计算展示所述至少一张图片的第二持续时长,
当所述第二持续时长大于第四预设时长时,重置所述至少一张图片为所述隐藏状态。
8.如权利要求1所述的方法,其特征在于,所述检测到针对所述预设元素的接触操作包括:
检测到鼠标与所述预设元素的接触操作;或者,
检测到手势与所述预设元素的接触操作。
9.一种图片展示装置,其特征在于,包括:
第一展示模块,用于在网页中展示预设元素,与所述预设元素对应的至少一张图片处于隐藏状态,所述预设元素是用于展示所述至少一张图片的交互式页面元素;
第二展示模块,用于检测到针对所述预设元素的接触操作后,展示与所述预设元素对应的至少一张图片。
10.如权利要求9所述的装置,其特征在于,所述第二展示模块包括:
第一计时子模块,用于检测到所述接触操作时触发计时器计算第一延时;
第一展示子模块,用于当所述第一延时大于第一预设时长时,展示与所述预设元素对应的至少一张图片;或者,
第二计时子模块,用于检测到所述接触操作已结束时触发计时器计算第二延时;
第二展示子模块,用于当所述第二延时大于第二预设时长时,展示与所述预设元素对应的至少一张图片;或者,
第三计时子模块,用于检测到所述接触操作是持续的接触操作时,触发计时器计算所述接触操作的第一持续时长;
第三展示子模块,用于当所述接触操作的第一持续时长大于第三预设时长时,展示与所述预设元素对应的至少一张图片。
11.如权利要求9所述的装置,其特征在于,所述第一展示模块包括:
第一处理子模块,将所述至少一张图片设置在所述预设元素的下一层,并被所述预设元素所遮盖;
所述第二展示模块包括:
第四展示子模块,用于移动所述至少一张图片至所述预设元素周围的展示位置进行展示,其中所述展示位置在所述预设元素的同一层。
12.如权利要求9所述的装置,其特征在于,所述第一展示模块包括:
第二处理子模块,用于将所述至少一张图片设置在所述预设元素周围的展示位置,并通过透明度的设置而处于隐藏状态;
所述第二展示模块包括:
第五展示子模块,用于逐渐降低所述至少一张图片的透明度,将所述至少一张图片展示在所述展示位置。
13.如权利要求9所述的装置,其特征在于,所述第二展示模块包括:
第六展示子模块,用于当所述至少一张图片为多张图片时,根据所述多张图片预设的展示顺序,依次展示所述多张图片。
14.如权利要求9所述的装置,其特征在于,所述装置还包括:
调整模块,用于所述多张图片的展示顺序或者展示位置,随着触发相应页面的频率由高到低的顺序的变化而调整。
15.如权利要求9所述的装置,其特征在于,所述装置还包括:
计时模块,用于展示与所述预设元素对应的至少一张图片时,触发计时器计算展示所述至少一张图片的第二持续时长,
重置模块,用于当所述第二持续时长大于第四预设时长时,重置所述至少一张图片为所述隐藏状态。
16.如权利要求9所述的装置,其特征在于,所述第二展示模块包括:
第一检测子模块,用于检测到鼠标与所述预设元素的接触操作;或者,
第二检测子模块,用于检测到手势与所述预设元素的接触操作。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510224703.7A CN106202097B (zh) | 2015-05-05 | 2015-05-05 | 图片展示方法和装置 |
PCT/CN2016/079814 WO2016177281A1 (zh) | 2015-05-05 | 2016-04-21 | 图片展示方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510224703.7A CN106202097B (zh) | 2015-05-05 | 2015-05-05 | 图片展示方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106202097A true CN106202097A (zh) | 2016-12-07 |
CN106202097B CN106202097B (zh) | 2019-12-03 |
Family
ID=57218052
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201510224703.7A Active CN106202097B (zh) | 2015-05-05 | 2015-05-05 | 图片展示方法和装置 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN106202097B (zh) |
WO (1) | WO2016177281A1 (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107608597A (zh) * | 2017-09-30 | 2018-01-19 | 咪咕数字传媒有限公司 | 一种展示方法、装置及计算机可读存储介质 |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109948101B (zh) * | 2019-03-21 | 2022-03-01 | Oppo广东移动通信有限公司 | 页面切换方法、装置、存储介质及电子设备 |
CN110888812B (zh) * | 2019-11-26 | 2023-11-07 | 国核自仪系统工程有限公司 | 终端页面的响应时间的测试系统及测试方法 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101123607A (zh) * | 2007-08-17 | 2008-02-13 | 北京金山软件有限公司 | 一种网页中图片信息动态刷新的方法和装置 |
CN102402588A (zh) * | 2011-10-26 | 2012-04-04 | 百度在线网络技术(北京)有限公司 | 一种对页面中的页面脚本进行预触发处理的设备和方法 |
CN103150099A (zh) * | 2013-04-02 | 2013-06-12 | 乐淘奇品网络技术(北京)有限公司 | 通过网页利用抽线选取商品部件的方法 |
CN103425633A (zh) * | 2012-05-16 | 2013-12-04 | 腾讯科技(深圳)有限公司 | 一种调节网页页面的方法及装置 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101000674A (zh) * | 2006-12-30 | 2007-07-18 | 上海序参量科技发展有限公司 | 网络中设置刮奖的方法 |
JP5347981B2 (ja) * | 2010-01-15 | 2013-11-20 | 富士ゼロックス株式会社 | 情報表示装置及びプログラム |
CN103019516B (zh) * | 2012-12-10 | 2016-08-03 | 北京世界星辉科技有限责任公司 | 用于显示页面的方法和设备 |
CN103034410B (zh) * | 2012-12-10 | 2016-01-13 | 北京奇虎科技有限公司 | 页面显示的方法及设备 |
CN104182430A (zh) * | 2013-05-28 | 2014-12-03 | 腾讯科技(深圳)有限公司 | 文本信息中的图片显示方法及装置 |
-
2015
- 2015-05-05 CN CN201510224703.7A patent/CN106202097B/zh active Active
-
2016
- 2016-04-21 WO PCT/CN2016/079814 patent/WO2016177281A1/zh active Application Filing
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101123607A (zh) * | 2007-08-17 | 2008-02-13 | 北京金山软件有限公司 | 一种网页中图片信息动态刷新的方法和装置 |
CN102402588A (zh) * | 2011-10-26 | 2012-04-04 | 百度在线网络技术(北京)有限公司 | 一种对页面中的页面脚本进行预触发处理的设备和方法 |
CN103425633A (zh) * | 2012-05-16 | 2013-12-04 | 腾讯科技(深圳)有限公司 | 一种调节网页页面的方法及装置 |
CN103150099A (zh) * | 2013-04-02 | 2013-06-12 | 乐淘奇品网络技术(北京)有限公司 | 通过网页利用抽线选取商品部件的方法 |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107608597A (zh) * | 2017-09-30 | 2018-01-19 | 咪咕数字传媒有限公司 | 一种展示方法、装置及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
WO2016177281A1 (zh) | 2016-11-10 |
CN106202097B (zh) | 2019-12-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106156066B (zh) | 一种页面切换方法、装置及客户端 | |
US20170220220A1 (en) | Advertisement generation apparatus and terminal device | |
CA2892570C (en) | Image display environment | |
US9224153B2 (en) | Recently viewed items display area | |
WO2015180433A1 (zh) | 自适应调整的界面流式布局显示的方法和系统 | |
US20130198641A1 (en) | Predictive methods for presenting web content on mobile devices | |
US20120304113A1 (en) | Gesture-based content-object zooming | |
US10026104B2 (en) | Method and system for automatically pausing advertisements based on user attention | |
CN105786352A (zh) | 快速定位页面内容的方法、装置及移动终端 | |
CN102831148B (zh) | 一种基于浏览器的推荐数据加载方法和装置 | |
WO2015051716A1 (en) | Method and apparatus for playing back data | |
CN103412928A (zh) | 一种在移动终端实现浏览器页面智能响应式布局的方法与装置 | |
US20170123617A1 (en) | Picture loading apparatus and method | |
CN106202097B (zh) | 图片展示方法和装置 | |
CN110769300B (zh) | 一种呈现信息流中横屏视频的方法与设备 | |
CN102298599A (zh) | 离线浏览网页方法及其系统 | |
US9794635B2 (en) | Distribution device, distribution method, and non-transitory computer readable storage medium | |
WO2017101390A1 (zh) | 一种图片显示方法及装置 | |
CN104361130B (zh) | 一种在网页中搜索局域网或指定网段内设备的方法 | |
KR20140086979A (ko) | 인터넷 브라우저-기반 원격 사용자 인터페이스 가상 마우스 커서 위치결정 방법 | |
CN115967831B (zh) | 视频显示方法、装置、电子设备及存储介质 | |
CN113722630B (zh) | 基于客户端渲染的资源数据在web页面中的呈现方法及设备 | |
WO2017192332A1 (en) | Systems and methods for view-based advertisement selection | |
CN106855870B (zh) | 一种网页显示方法和装置 | |
JP6203140B2 (ja) | 表示プログラム、端末装置、表示方法及び配信装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1231213 Country of ref document: HK |
|
GR01 | Patent grant | ||
GR01 | Patent grant |