html自动发消息,一种自适应HTML滚屏展示实时信息的方法与流程

本发明涉及一种自适应HTML滚屏展示实时信息的方法。属于网页设计技术领域。

背景技术：

在展示性的网页中，往往需要用到文字滚动的方法来展示实时信息，也可以是移动图片、表格，甚至小视频。简单的页面自动滚动效果，可由JavaScript来实现，也可由html标签——来实现，后者无需JavaScript控制。

的属性之一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：创建父容器的两个块级子元素(例如

按照图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。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。