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

文档序号:12719939阅读:来源:国知局

技术特征:

1.一种自适应HTML滚屏展示实时信息的方法,包括:在自定义的周期内,采用浏览器AJAX发起获取最新数据的请求;将返回的最新数据进行预处理,作为最新对象,当前正在展示的对象作为当前对象,将最新对象和当前对象做对比;若判断当前对象即为最新对象,不做任何操作,否则,当前对象停止滚屏并自动消失,最新对象出现,其后最新对象滚动显示。

2.根据权利要求1所述的方法,其特征在于:在采用浏览器AJAX发起获取最新数据的请求之前,还包括如下步骤:

S1:创建一个父容器的div,所述父容器的样式设置为相对定位,其中,高度固定,宽度根据当前浏览器页面的宽度变化,若需要显示的内容超出父容器所能承载的空间,则不显示超出部分;

S2:创建父容器的两个块级子元素A和B,子元素A显示,其承载要滚动的对象,随着滚动不断改变位置;子元素B隐藏,其用于存储当前对象的初始文本以及测量文本的宽度。

3.根据权利要求2所述的方法,其特征在于:对于所述子元素A和所述子元素B的子元素样式,除了子元素A是显示、子元素B是隐藏,此外所述子元素A和所述子元素B的其他样式完全相同。

4.根据权利要求3所述的方法,其特征在于:所述其他样式包括绝对定位,其中,段落中的文本不进行换行。

5.根据权利要求1-4中任一项所述的方法,其特征在于:所述方法进一步包括:

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,其中周期自定义。

当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1