CN106055323B

CN106055323B - 一种实现跑马灯无缝滚动效果的方法和装置

Info

Publication number: CN106055323B
Application number: CN201610362396.3A
Authority: CN
Inventors: 李朋繁
Original assignee: Inspur Software Group Co Ltd
Current assignee: Inspur Software Technology Co Ltd
Priority date: 2016-05-26
Filing date: 2016-05-26
Publication date: 2019-04-16
Anticipated expiration: 2036-05-26
Also published as: CN106055323A

Abstract

本发明提供了一种实现跑马灯无缝滚动效果的方法和装置，该方法包括：确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息，将目标信息拷贝到滚动信息之后，形成新的滚动信息；确定滚动信息的绝对长度；将绝对长度加第一层容器宽度，构建显示长度；根据显示长度，在第一层容器宽度滚动显示新的滚动信息；统计当前循环中，滚动出第一层容器的信息长度；当滚动出第一容器的信息长度达到所述绝对长度时，移除第一层容器中显示的当前信息；根据移除的当前信息，进行下一轮滚动信息的滚动。本发明提供的方案实现了两条信息间的无缝滚动。

Description

一种实现跑马灯无缝滚动效果的方法和装置

技术领域

本发明涉及计算机技术领域，特别涉及一种实现跑马灯无缝滚动效果的方法和装置。

背景技术

随着计算机网络技术的不断发展，常常通过跑马灯滚动效果，在有限的页面上呈现更多的内容。目前，跑马灯使用过程中，在两条信息之间形成空白区域，即只有当当前信息的结尾滚动出跑马灯显示区域，下一条信息才开始进入跑马灯显示区域，而无法实现两条信息间的无缝滚动。

发明内容

本发明实施例提供了实现跑马灯无缝滚动效果的方法和装置，实现了两条信息间的无缝滚动。

一种实现跑马灯无缝滚动效果的方法，确定第一层容器宽度，从滚动信息的起始位置复制大于等于所述第一层容器宽度的目标信息，还包括：

将所述目标信息拷贝到所述滚动信息之后，形成新的滚动信息；

确定所述滚动信息的绝对长度；

将所述绝对长度加所述第一层容器宽度，构建显示长度；

根据所述显示长度，在所述第一层容器宽度滚动显示所述新的滚动信息；

统计当前循环中，滚动出所述第一层容器的信息长度；

当滚动出所述第一容器的信息长度达到所述绝对长度时，移除所述第一层容器中显示的当前信息；

根据移除的当前信息，进行下一轮滚动信息的滚动。

优选地，上述方法进一步包括：设置第二层容器和第三层容器；

在所述第二层容器中，添加禁止换行及绝对定位属性；

在所述第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；

所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述绝对定位属性和所述滚动动画，进行不换行滚动显示所述新的滚动信息。

优选地，上述方法进一步包括：为所述目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；

所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述目标信息的绝对定位，在所述滚动信息结尾进入所述第一层容器的显示区域时，所述目标信息接续显示，并根据所述目标信息的超出隐藏属性，在所述显示区域之外的目标信息则不显示。

优选地，上述方法进一步包括：为所述第一层容器设置绝对定位及超出隐藏属性；

所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：确定所述第一层容器的显示区域在网页上的位置；

在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏。

优选地，上述方法应用于CCS网页。

一种实现跑马灯无缝滚动效果的装置，包括：

设置单元，用于设置第一层容器宽度；

生成单元，用于从滚动信息的起始位置复制大于等于所述设置单元设置的第一层容器宽度的目标信息，将所述目标信息拷贝到所述滚动信息之后，形成新的滚动信息；

确定构建单元，用于确定所述滚动信息的绝对长度，并将所述绝对长度加所述第一层容器宽度，构建显示长度；

滚动显示单元，用于根据所述确定构建单元构建的显示长度，在所述第一层容器宽度滚动显示所述生成单元形成的新的滚动信息，根据移除单元移除的当前信息，进行下一轮滚动信息的滚动；

移除单元，用于统计当前循环中，所述滚动显示单元滚动出的信息长度，当滚动出的信息长度达到所述确定构建单元确定的绝对长度时，移除所述滚动显示单元显示的当前信息。

优选地，所述设置单元，进一步用于设置第二层容器和第三层容器，并在所述第二层容器中，添加禁止换行及绝对定位属性；在所述第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；

所述滚动显示单元，用于根据所述设置单元添加的绝对定位属性和所述滚动动画，进行不换行滚动显示所述新的滚动信息。

优选地，所述设置单元，进一步用于为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；

所述滚动显示单元，用于根据所述设置单元添加的目标信息的绝对定位，在所述滚动信息结尾进入所述第一层容器的显示区域时，所述目标信息接续显示，并根据所述目标信息的超出隐藏属性，在所述显示区域之外的目标信息则不显示。

优选地，所述设置单元，进一步用于为第一层容器设置绝对定位及超出隐藏属性；

所述滚动显示单元，用于确定所述第一层容器的显示区域在网页上的位置，在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏。

优选地，上述装置应用于CCS网页跑马灯。

本发明实施例提供了一种实现跑马灯无缝滚动效果的方法和装置，该方法通过确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息，将目标信息拷贝到滚动信息之后，形成新的滚动信息；确定滚动信息的绝对长度；将绝对长度加第一层容器宽度，构建显示长度；根据显示长度，在第一层容器宽度滚动显示新的滚动信息；统计当前循环中，滚动出第一层容器的信息长度；当滚动出第一容器的信息长度达到绝对长度时，移除第一层容器中显示的当前信息；根据移除的当前信息，进行下一轮滚动信息的滚动，绝对长度与显示长度相差的第一层容器宽度即为当前循环与下一个循环之间的空白区域，而通过拷贝的目标信息，使得在滚动信息结尾紧跟目标信息显示，而当下一个循环开始时，将直接移除上述显示的目标信息，从而实现了两条信息间的无缝滚动。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提供的一种实现跑马灯无缝滚动效果的方法的流程图；

图2是本发明另一个实施例提供的一种实现跑马灯无缝滚动效果的方法的流程图；

图3是本发明一个实施例提供的一种实现跑马灯无缝滚动效果的装置所在架构的结构示意图；

图4是本发明一个实施例提供的一种实现跑马灯无缝滚动效果的装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供了一种实现跑马灯无缝滚动效果的方法，该方法可以包括以下步骤：

步骤101：确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息；

步骤102：将目标信息拷贝到滚动信息之后，形成新的滚动信息；

步骤103：确定滚动信息的绝对长度；

步骤104：将绝对长度加第一层容器宽度，构建显示长度；

步骤105：根据显示长度，在第一层容器宽度滚动显示新的滚动信息；

步骤106：统计当前循环中，滚动出第一层容器的信息长度；

步骤107：当滚动出第一容器的信息长度达到绝对长度时，移除第一层容器中显示的当前信息；

步骤108：根据移除的当前信息，进行下一轮滚动信息的滚动。

在图1所示的实施例中，通过确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息，将目标信息拷贝到滚动信息之后，形成新的滚动信息；确定滚动信息的绝对长度；将绝对长度加第一层容器宽度，构建显示长度；根据显示长度，在第一层容器宽度滚动显示新的滚动信息；统计当前循环中，滚动出第一层容器的信息长度；当滚动出第一容器的信息长度达到绝对长度时，移除第一层容器中显示的当前信息；根据移除的当前信息，进行下一轮滚动信息的滚动，绝对长度与显示长度相差的第一层容器宽度即为当前循环与下一个循环之间的空白区域，而通过拷贝的目标信息，使得在滚动信息结尾紧跟目标信息显示，而当下一个循环开始时，将直接移除上述显示的目标信息，从而实现了两条信息间的无缝滚动。

在本发明一个实施例中，为了能够实现跑马灯滚动效果，上述方法进一步包括：设置第二层容器和第三层容器；在第二层容器中，添加禁止换行及绝对定位属性；在第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；步骤105的具体实施方式，包括：根据绝对定位属性和滚动动画，进行不换行滚动显示新的滚动信息。

在本发明一个实施例中，为了保障两条信息间实现无缝滚动，上述方法进一步包括：为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；步骤105的具体实施方式，包括：根据目标信息的绝对定位，在滚动信息结尾进入第一层容器的显示区域时，目标信息接续显示，并根据目标信息的超出隐藏属性，在显示区域之外的目标信息则不显示。

在本发明一个实施例中，为了仅在第一容器显示区域显示信息，上述方法进一步包括：为第一层容器设置绝对定位及超出隐藏属性；步骤105的具体实施方式，包括：确定第一层容器的显示区域在网页上的位置；在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏。

在本发明一个实施例中，上述方法应用于CCS网页。

以在CCS网页实现跑马灯无缝滚动效果为例，展开说明实现跑马灯无缝滚动效果的方法，如图2所示，该方法可以包括以下步骤：

步骤200：为CCS网页设置第一层容器、第二层容器和第三层容器；

在该步骤设置的三层容器中，第一层容器用来显示信息内容，第二层容器和第三层容器用来设置信息内容的不同显示方式。

步骤201：确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息；

例如：第一层容器宽度为1cm×10cm，可以同时显示15个字，在本发明实施例中滚动信息内容为“×××公司在××会议中指出……”那么，在该步骤中，从“×××公司”开始向后复制15个字以上作为目标信息。

步骤202：将目标信息拷贝到滚动信息之后，形成新的滚动信息；

该过程主要是通过<div id＝”box1”><div id＝”box2”><span id＝”box3”>滚动信息</span></div></div>；在滚动内容之后再添加目标信息：<div id＝”box1”><div id＝”box2”><span id＝”box3”>目标信息<span id＝”box3_copy”>滚动内容</span></span></div></div>；实现新的滚动信息存放在第一层容器中，并通过第一层容器显示区域进行显示。

步骤203：在第二层容器中，添加禁止换行及绝对定位属性；

即在滚动信息在显示区域内禁止自动换行，并对显示的信息进行绝对定位。

步骤204：确定滚动信息的绝对长度；

通过步骤203设置的绝对定位，定位出滚动信息“×××公司在××会议中指出……”的绝对长度。

步骤205：将绝对长度加第一层容器宽度，构建显示长度；

该步骤使得显示长度刚好比绝对长度多一个第一层容器宽度，即目标信息可以紧随滚动信息之后显示，而不会在两条滚动信息间形成空白区域，一般来说，只有当第一条信息的结尾消失在显示区域之后，第二条信息才显示出来，而通过该步骤，可以使目标信息填补第一条信息与第二条信息间出现的空白区域。

步骤206：在第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；

该过程主要设置的是滚动信息从左向右滚动的实现方式，另外用户还可以根据自己的需求设置滚动信息从下向上滚动。

步骤207：根据显示长度，在第一层容器宽度滚动显示新的滚动信息；

通过该步骤，可以使目标信息接续在滚动信息之后显示出来。通过为所述第一层容器设置绝对定位及超出隐藏属性；确定第一层容器的显示区域在网页上的位置；根据上述步骤设置的绝对定位属性和滚动动画，在定位出的显示区域进行不换行滚动显示新的滚动信息。

另外，还需要为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；以使在滚动信息结尾进入第一层容器的显示区域时，目标信息接续显示，并根据目标信息的超出隐藏属性，在显示区域之外的目标信息则不显示，从而保证显示的准确性。

步骤208：统计当前循环中，滚动出第一层容器的信息长度；

步骤209：当滚动出第一容器的信息长度达到绝对长度时，移除第一层容器中显示的当前信息；

在该步骤中，例如滚动信息为“×××公司在××会议中指出……”，当这一滚动信息的最后一个字刚好滚出显示区域时，滚动出第一层容器的信息长度即达到绝对长度，此时显示区域中显示的是目标信息中的内容即该步骤提及的当前信息。

步骤210：根据移除的当前信息，进行下一轮滚动信息的滚动。

在该步骤中主要是用下一轮滚动信息替换当前信息，例如：当前信息显示为“×××公司在××会议”，而下一轮滚动信息的起始内容也包含“×××公司在××会议”，那么就可以用下一轮滚动信息的“×××公司在××会议”替换当前信息的“×××公司在××会议”，整个过程对于用户来说完全感觉不出来，从而实现了滚动信息的无缝滚动。

如图3、图4所示，本发明实施例提供了一种实现跑马灯无缝滚动效果的装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。从硬件层面而言，如图3所示，为本发明实施例提供的实现跑马灯无缝滚动效果的装置所在设备的一种硬件结构图，除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的设备通常还可以包括其他硬件，如负责处理报文的转发芯片等等。以软件实现为例，如图4所示，作为一个逻辑意义上的装置，是通过其所在设备的CPU将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。本实施例提供的实现跑马灯无缝滚动效果的装置，包括：

设置单元401，用于设置第一层容器宽度；

生成单元402，用于从滚动信息的起始位置复制大于等于设置单元401设置的第一层容器宽度的目标信息，将目标信息拷贝到滚动信息之后，形成新的滚动信息；

确定构建单元403，用于确定滚动信息的绝对长度，并将绝对长度加第一层容器宽度，构建显示长度；

滚动显示单元404，用于根据确定构建单元403构建的显示长度，在第一层容器宽度滚动显示生成单元402形成的新的滚动信息，根据移除单元405移除的当前信息，进行下一轮滚动信息的滚动；

移除单元405，用于统计当前循环中，滚动显示单元404滚动出的信息长度，当滚动出的信息长度达到确定构建单元403确定的绝对长度时，移除滚动显示单元404显示的当前信息。

在本发明另一实施例中，设置单元401，进一步用于设置第二层容器和第三层容器，并在第二层容器中，添加禁止换行及绝对定位属性；在第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；

滚动显示单元404，用于根据设置单元401添加的绝对定位属性和滚动动画，进行不换行滚动显示新的滚动信息。

在本发明又一实施例中，设置单元401，进一步用于为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；

滚动显示单元404，用于根据设置单元401添加的目标信息的绝对定位，在滚动信息结尾进入第一层容器的显示区域时，目标信息接续显示，并根据目标信息的超出隐藏属性，在显示区域之外的目标信息则不显示。

在本发明又一实施例中，设置单元401，进一步用于为第一层容器设置绝对定位及超出隐藏属性；

滚动显示单元404，用于确定第一层容器的显示区域在网页上的位置，在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏。

在本发明另一实施例中，上述实现跑马灯无缝滚动效果的装置应用于CCS网页跑马灯。

上述各个步骤和装置通过下述代码能够实现：

根据上述方案，本发明的各实施例，至少具有如下有益效果：

1.通过确定第一层容器宽度，从滚动信息的起始位置复制大于等于第一层容器宽度的目标信息，将目标信息拷贝到滚动信息之后，形成新的滚动信息；确定滚动信息的绝对长度；将绝对长度加第一层容器宽度，构建显示长度；根据显示长度，在第一层容器宽度滚动显示新的滚动信息；统计当前循环中，滚动出第一层容器的信息长度；当滚动出第一容器的信息长度达到绝对长度时，移除第一层容器中显示的当前信息；根据移除的当前信息，进行下一轮滚动信息的滚动，绝对长度与显示长度相差的第一层容器宽度即为当前循环与下一个循环之间的空白区域，而通过拷贝的目标信息，使得在滚动信息结尾紧跟目标信息显示，而当下一个循环开始时，将直接移除上述显示的目标信息，从而实现了两条信息间的无缝滚动。

2.通过设置第二层容器和第三层容器；在第二层容器中，添加禁止换行及绝对定位属性；在第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环，为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；根据绝对定位属性和滚动动画，进行不换行滚动显示新的滚动信息，同时，根据目标信息的绝对定位，在滚动信息结尾进入第一层容器的显示区域时，目标信息接续显示，并根据目标信息的超出隐藏属性，在显示区域之外的目标信息则不显示，进一步保证了无缝滚动效果的实现。

3.通过为第一层容器设置绝对定位及超出隐藏属性；确定第一层容器的显示区域在网页上的位置，在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏，保证了跑马灯的实现，同时，保证跑马灯不遮挡页面其他文字。

需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个〃·····”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.一种实现跑马灯无缝滚动效果的方法，其特征在于，确定第一层容器宽度，从滚动信息的起始位置复制大于等于所述第一层容器宽度的目标信息，还包括：

确定所述滚动信息的绝对长度；

将所述绝对长度加所述第一层容器宽度，构建显示长度；

统计当前循环中，滚动出所述第一层容器的信息长度；

当滚动出所述第一层容器的信息长度达到所述绝对长度时，移除所述第一层容器中显示的当前信息；

根据移除的当前信息，进行下一轮滚动信息的滚动；

进一步包括：设置第二层容器和第三层容器；

在所述第二层容器中，添加禁止换行及绝对定位属性；

所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述绝对定位属性和所述滚动动画，进行不换行滚动显示所述新的滚动信息；

进一步包括：为所述目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；

所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述目标信息的绝对定位，在所述滚动信息结尾进入所述第一层容器的显示区域时，所述目标信息接续显示，并根据所述目标信息的超出隐藏属性，在所述显示区域之外的目标信息则不显示；

进一步包括：为所述第一层容器设置绝对定位及超出隐藏属性；

在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏，

并应用于CCS网页。

2.一种实现跑马灯无缝滚动效果的装置，其特征在于，包括：

设置单元，用于设置第一层容器宽度；

移除单元，用于统计当前循环中，所述滚动显示单元滚动出的信息长度，当滚动出的信息长度达到所述确定构建单元确定的绝对长度时，移除所述滚动显示单元显示的当前信息；

所述设置单元，进一步用于设置第二层容器和第三层容器，并在所述第二层容器中，添加禁止换行及绝对定位属性；在所述第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置-100％；并无限循环；

所述滚动显示单元，用于根据所述设置单元添加的绝对定位属性和所述滚动动画，进行不换行滚动显示所述新的滚动信息；

所述设置单元，进一步用于为目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；

所述滚动显示单元，用于根据所述设置单元添加的目标信息的绝对定位，在所述滚动信息结尾进入所述第一层容器的显示区域时，所述目标信息接续显示，并根据所述目标信息的超出隐藏属性，在所述显示区域之外的目标信息则不显示；

所述设置单元，进一步用于为第一层容器设置绝对定位及超出隐藏属性；

所述滚动显示单元，用于确定所述第一层容器的显示区域在网页上的位置，在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏并应用于CCS网页跑马灯。