CN106874387B - 一种自适应html滚屏展示实时信息的方法 - Google Patents

一种自适应html滚屏展示实时信息的方法 Download PDF

Info

Publication number
CN106874387B
CN106874387B CN201710021118.6A CN201710021118A CN106874387B CN 106874387 B CN106874387 B CN 106874387B CN 201710021118 A CN201710021118 A CN 201710021118A CN 106874387 B CN106874387 B CN 106874387B
Authority
CN
China
Prior art keywords
latest
width
parent container
sub
scrolling
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.)
Active
Application number
CN201710021118.6A
Other languages
English (en)
Other versions
CN106874387A (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.)
Kunshan Microelectronics Technology Research Institute
Original Assignee
Kunshan Branch Institute of Microelectronics of CAS
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 Kunshan Branch Institute of Microelectronics of CAS filed Critical Kunshan Branch Institute of Microelectronics of CAS
Priority to CN201710021118.6A priority Critical patent/CN106874387B/zh
Publication of CN106874387A publication Critical patent/CN106874387A/zh
Application granted granted Critical
Publication of CN106874387B publication Critical patent/CN106874387B/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
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提供一种自适应HTML滚屏展示实时信息的方法，其采用浏览器AJAX发起获取最新数据的请求，请求周期自定义，将返回的结果按要求拼接成要展示的形式，即为最新对象，并与当前正在展示的对象，即为当前对象，作对比，若判断当前对象即为最新对象，不做任何操作，否则，当前对象停止滚屏自动消失，最新对象出现，然后滚动。所述方法采用最基本的JavaScript脚本控制元素内容的移动位置，无需引入其他插件，实现了对象的无缝滚动，直接通过浏览器就可实现。在周期相对较短时，在缩放浏览器页面的同时仍能很好地实时调整对象的展现方式，在各种移动设备如手机、平板上也适用。

Description

一种自适应HTML滚屏展示实时信息的方法
技术领域
本发明涉及一种自适应HTML滚屏展示实时信息的方法。属于网页设计技术领域。
背景技术
在展示性的网页中，往往需要用到文字滚动的方法来展示实时信息，也可以是移动图片、表格，甚至小视频。简单的页面自动滚动效果，可由JavaScript来实现，也可由html标签——<marquee></marquee>来实现，后者无需JavaScript控制。
<marquee></marquee>的属性之一behavior可设置滚动的方式，然而无论是scroll(由一端滚动到另一端,会重复,缺陷是不能无缝滚动)还是slide(由一端滚动到另一端,不会重复)都无法实现无缝滚动的功能。
简单的JavaScript控制，也无法找到在网页宽度自适应条件下仍保持无缝滚动的现有技术解决方案。
发明内容
本发明为了克服上述现有技术中存在的技术缺陷，本发明基于bootstrap框架下的页面实时滚动最新消息(可能是文字，图片等，以下称为对象)的需求，包括对象的出现方式、滚动方式、停留方式、消失方式等设计了一套完整的流程，提出一种自适应HTML滚屏展示实时信息的方法，本发明的目的是通过以下技术方案实现的。
一种自适应HTML滚屏展示实时信息的方法，包括:在自定义的周期内，采用浏览器AJAX发起获取最新数据的请求；将返回的结果按要求拼接成要展示的形式，作为最新对象，当前正在展示的对象作为当前对象,将最新对象和当前对象做对比；若判断当前对象即为最新对象，不做任何操作，否则，当前对象停止滚屏自动消失，最新对象出现，然后最新对象滚动显示。
优选地，在采用浏览器AJAX发起获取最新数据的请求之前，还包括如下步骤：
S1：创建一个父容器的div，所述父容器的样式设置为相对定位，其中，高度固定，宽度根据当前浏览器页面的宽度变化，若需要显示的内容超出父容器所能承载的空间，则不显示超出部分；
S2：创建父容器的两个块级子元素A和B，子元素A显示，其承载要滚动的对象，随着滚动不断改变位置；子元素B隐藏，其用于存储当前对象的初始文本以及测量文本的宽度。
优选地，对于所述子元素A和所述子元素B的子元素样式，除了子元素A是显示、子元素B是隐藏，此外所述子元素A和所述子元素B的其他样式完全相同。
优选地，所述其他样式包括绝对定位，其中，段落中的文本不进行换行。
优选地，所述方法进一步包括：
S11:采用AJAX异步请求得到最新数据，将返回的结果按照固定格式拼接成要展示的形式，作为最新对象；
S12:当前展示的对象作为当前对象存储在元素B中，将所述最新对象和所述当前对象作比较，若内容相同，则表示当前对象即为最新对象，返回S11，让当前对象继续按照原有形式展示,若不同则执行S13；
S13:结束当前对象的展示，将最新对象赋值给元素A、元素B，获取此时浏览器宽度下的父容器的宽度和元素B的新宽度，此时元素A和元素B的宽度相同；
S14：比较父容器宽度和元素B的宽度,若元素B宽度小于等于父容器宽度，执行S15,若元素B宽度大于父容器宽度，执行S16；
S15:将元素A以由下至上的动画方式出现，结束动画后，元素A以左右居中的方式静止在父容器的中间部位；
S16：最新对象以居右的由下至上的动画方式出现，结束动画后元素A开始以水平从右向左的方式移动，当元素A的最后一个字出现后，此时若没有可更新的最新对象或者不到一个周期的时长，在元素A末尾加上元素B中的内容，继续向左移动，当元素A再次滚动完后，继续在末尾加上元素B中的内容，如此反复；
S17：一个周期结束后，执行S11，其中周期自定义。
本发明的自适应宽度下滚屏展示实时消息的方法，采用最基本的JavaScript脚本控制元素内容的移动位置，无需引入其他插件，实现了对象的无缝滚动，直接通过浏览器就可实现。在周期相对较短时，在缩放浏览器页面的同时仍能很好地实时调整对象的展现方式，在各种移动设备如手机、平板上也适用。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1是按照本发明实施方式的HTML文档的DOM结构的实现流程图。
图2是按照本发明实施方式的JavaScript脚本的工作流程图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施方式。虽然附图中显示了本公开的示例性实施方式，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
一种自适应宽度下HTML滚屏展示实时消息的方法，采用最基本的JavaScript脚本控制元素内容的移动位置，无需引入其他插件，实现了对象的无缝滚动，直接通过浏览器就可实现。在周期相对较短时，在缩放浏览器页面的同时仍能很好地实时调整对象的展现方式，在各种移动设备如手机，平板上也适用。该方法采用浏览器AJAX发起获取最新数据的请求，请求周期自定义，将返回的结果按要求拼接成要展示的形式(以文本为例，以下称为最新对象)，并与当前正在展示的对象(当前对象)做对比，若判断当前对象即为最新对象，不做任何操作，否则，当前对象停止滚屏自动消失，最新对象出现，然后滚动。
具体地，按照图1所示，HTML文档的DOM结构的实现过程如下：
S1：创建一个父容器的div，该父容器的样式设置为相对定位，高度固定，宽度则是根据当前浏览器页面的宽度变化，若其中的内容超出父容器所能承载的空间，则不显示超出部分。
S2：创建父容器的两个块级子元素(例如<p></p>元素)，子元素A承载要滚动的对象，会随着滚动不断改变位置；子元素B隐藏，用来存储当前对象的初始文本以及测量文本的宽度。除了显示/隐藏的样式不同，A和B的其他样式完全相同，包括绝对定位，且需规定段落中的文本不进行换行(white-space:nowrap)，否则对象宽度无法准确获得。
按照图2所示，其中，JavaScript脚本的工作流程如下：
S11:采用ajax异步请求得到最新数据，将返回的结果按照固定格式拼接成要展示的形式(最新对象)。
S12:最新对象与当前展示对象(存储在元素B中)作比较，若内容相同，则表示当前对象即为最新消息，不做任何操作，让当前对象继续按照原有形式展示。
S13:若S12中的比较结果为不同，则表示有需要更新的最新消息，立即结束当前对象的展示。将最新对象赋值给元素A、元素B，获取此时浏览器宽度下的父容器的宽度和元素B的新宽度，此时元素A和元素B的宽度相同。
S14：比较父容器宽度和元素B的宽度。
S15:若S14中元素B宽度小于等于父容器宽度，表示最新对象完全可以被父容器所承载，不需要通过以滚动的形式来展现全部内容。所以元素A以由下至上的动画方式出现，动画使用CSS3的animation,结束动画后元素A以左右居中的方式静止在父容器的中间部位。
S16：若S14中元素B宽度大于父容器宽度，则表示最新对象无法在父容器中展示全貌。首先最新对象以居右的由下至上的动画方式出现，结束动画后元素A开始以水平从右向左的方式移动，移动速度自定义。当元素A的最后一个字出现后，此时若没有可更新的最新对象或者不到一个周期的时长，在A末尾加上B中的内容，继续向左移动。当A再次滚动完后，继续在末尾加上B中的内容，如此反复，直至请求到最新对象。
S17：一个周期结束后，周期自定义，重复执行S11。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (2)

1.一种自适应HTML滚屏展示实时信息的方法，包括:在自定义的周期内，采用浏览器AJAX发起获取最新数据的请求；将返回的最新数据进行预处理，作为最新对象，当前正在展示的对象作为当前对象,将最新对象和当前对象做对比；若判断当前对象即为最新对象，不做任何操作，否则，当前对象停止滚屏并自动消失，最新对象出现，其后最新对象滚动显示；
在采用浏览器AJAX发起获取最新数据的请求之前，还包括如下步骤：
S1：创建一个父容器的div，所述父容器的样式设置为相对定位，其中，高度固定，宽度根据当前浏览器页面的宽度变化，若需要显示的内容超出父容器所能承载的空间，则不显示超出部分；
S2：创建父容器的两个块级子元素A和B，子元素A显示，其承载要滚动的对象，随着滚动不断改变位置；子元素B隐藏，其用于存储当前对象的初始文本以及测量文本的宽度；
对于所述子元素A和所述子元素B的子元素样式，除了子元素A是显示、子元素B是隐藏，此外所述子元素A和所述子元素B的其他样式完全相同；
所述其他样式包括绝对定位，其中，段落中的文本不进行换行。
2.根据权利要求1所述的方法，其特征在于：所述方法进一步包括：
S11:采用AJAX异步请求得到最新数据，将返回的结果按照固定格式拼接成要展示的形式，作为最新对象；
S12:当前展示的对象作为当前对象存储在元素B中，将所述最新对象和所述当前对象作比较，若内容相同，则表示当前对象即为最新对象，返回S11，让当前对象继续按照原有形式展示，若不同则执行S13；
S13:结束当前对象的展示，将最新对象赋值给元素A、元素B，获取此时浏览器宽度下的父容器的宽度和元素B的新宽度，此时元素A和元素B的宽度相同；
S14：比较父容器宽度和元素B的宽度,若元素B宽度小于等于父容器宽度，执行S15,若元素B宽度大于父容器宽度，执行S16；
S15:将元素A以由下至上的动画方式出现，结束动画后，元素A以左右居中的方式静止在父容器的中间部位；
S16：最新对象以居右的由下至上的动画方式出现，结束动画后元素A开始以水平从右向左的方式移动，当元素A的最后一个字出现后，此时若没有可更新的最新对象或者不到一个周期的时长，在元素A末尾加上元素B中的内容，继续向左移动，当元素A再次滚动完后，继续在末尾加上元素B中的内容，如此反复；
S17：一个周期结束后，执行S11，其中周期自定义。
CN201710021118.6A 2017-01-11 2017-01-11 一种自适应html滚屏展示实时信息的方法 Active CN106874387B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710021118.6A CN106874387B (zh) 2017-01-11 2017-01-11 一种自适应html滚屏展示实时信息的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710021118.6A CN106874387B (zh) 2017-01-11 2017-01-11 一种自适应html滚屏展示实时信息的方法

Publications (2)

Publication Number Publication Date
CN106874387A CN106874387A (zh) 2017-06-20
CN106874387B true CN106874387B (zh) 2020-09-11

Family

ID=59158111

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710021118.6A Active CN106874387B (zh) 2017-01-11 2017-01-11 一种自适应html滚屏展示实时信息的方法

Country Status (1)

Country Link
CN (1) CN106874387B (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107329759A (zh) * 2017-06-30 2017-11-07 北京酷我科技有限公司 一种内容滚动显示的方法
CN108733446A (zh) * 2018-05-23 2018-11-02 深圳市茁壮网络股份有限公司 一种文字信息的展示方法及装置
CN111949264B (zh) * 2020-07-09 2024-07-02 北京齐尔布莱特科技有限公司 一种页面元素的定位方法及移动终端
CN113393559A (zh) * 2021-08-17 2021-09-14 深圳市信润富联数字科技有限公司 动态效果图片生成方法、装置、电子设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1959679A (zh) * 2006-09-25 2007-05-09 北京爱笛星科技有限公司 网页微内容提取、聚合和自动更新系统的方法
CN101079041A (zh) * 2006-12-29 2007-11-28 腾讯科技（深圳）有限公司 一种更新动态网页的方法及系统
CN102609416A (zh) * 2011-01-21 2012-07-25 富泰华工业（深圳）有限公司 网页资讯保存控件及方法
CN106055323A (zh) * 2016-05-26 2016-10-26 浪潮软件集团有限公司 一种实现跑马灯无缝滚动效果的方法和装置
US9632987B2 (en) * 2008-01-02 2017-04-25 International Business Machines Corporation Technique that enhances the manipulation of an HTML tree presentation by using an array representation of the hierarchical path of a tree node

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1959679A (zh) * 2006-09-25 2007-05-09 北京爱笛星科技有限公司 网页微内容提取、聚合和自动更新系统的方法
CN101079041A (zh) * 2006-12-29 2007-11-28 腾讯科技（深圳）有限公司 一种更新动态网页的方法及系统
US9632987B2 (en) * 2008-01-02 2017-04-25 International Business Machines Corporation Technique that enhances the manipulation of an HTML tree presentation by using an array representation of the hierarchical path of a tree node
CN102609416A (zh) * 2011-01-21 2012-07-25 富泰华工业（深圳）有限公司 网页资讯保存控件及方法
CN106055323A (zh) * 2016-05-26 2016-10-26 浪潮软件集团有限公司 一种实现跑马灯无缝滚动效果的方法和装置

Also Published As

Publication number Publication date
CN106874387A (zh) 2017-06-20

Similar Documents

Publication Publication Date Title
CN107885848B (zh) 基于web技术的网页截屏方法
CN106874387B (zh) 一种自适应html滚屏展示实时信息的方法
CN102591853B (zh) 网页重排方法、网页重排装置以及移动终端
CN102779167B (zh) 在移动终端中显示网页的方法及系统
CN103853417B (zh) 网络动态图片的滚动分页显示方法和装置
CN109683978B (zh) 一种流式布局界面渲染的方法、装置以及电子设备
US20140006934A1 (en) Method for rearranging web page
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN105100869A (zh) 弹幕显示方法及装置
CN102663126A (zh) 一种在移动终端中显示网页的方法及装置
CN107533568B (zh) 确定应用缩放等级的系统和方法
US8959432B2 (en) Utilizing document structure for animated pagination
CN112507257B (zh) 一种网页显示方法、装置、设备以及存储介质
CN105242817A (zh) 页面元素实时突出显示的方法及装置
CN104217037A (zh) 一种在移动终端中显示网页的方法及装置
CN104423839A (zh) 浏览器资源显示方法和装置
CN105988793A (zh) 用于屏幕显示设备的图像展示方法及装置
CN112835499A (zh) 一种轮播图展示方法、装置、设备及介质
US10572572B2 (en) Dynamic layout generation for an electronic document
WO2019109889A1 (zh) 网页显示方法、浏览器、终端和计算机可读存储介质
JP2021512415A (ja) デジタルコンポーネントのバックドロップレンダリング
CN113190321A (zh) 一种用于应用程序页面上拉刷新的方法及设备
US20150370524A1 (en) Content providing device, content providing method, and computer program product
CN113378084A (zh) 页面展示方法和装置、电子设备以及计算机可读存储介质
CN105589883B (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
CP03 Change of name, title or address

Address after: 215347 no.707, complex building, Kunshan Industrial Technology Research Institute, no.1699, Zuchongzhi South Road, Kunshan, Suzhou, Jiangsu Province

Patentee after: Kunshan Microelectronics Technology Research Institute

Address before: 215347 7th floor, Institute of technology complex, 1699 Weicheng South Road, Kunshan City, Suzhou City, Jiangsu Province

Patentee before: KUNSHAN BRANCH, INSTITUTE OF MICROELECTRONICS OF CHINESE ACADEMY OF SCIENCES

CP03 Change of name, title or address