[发明专利]一种实现跑马灯无缝滚动效果的方法和装置

摘要

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

主权项

1.一种实现跑马灯无缝滚动效果的方法，其特征在于，确定第一层容器宽度，从滚动信息的起始位置复制大于等于所述第一层容器宽度的目标信息，还包括：将所述目标信息拷贝到所述滚动信息之后，形成新的滚动信息；确定所述滚动信息的绝对长度；将所述绝对长度加所述第一层容器宽度，构建显示长度；根据所述显示长度，在所述第一层容器宽度滚动显示所述新的滚动信息；统计当前循环中，滚动出所述第一层容器的信息长度；当滚动出所述第一层容器的信息长度达到所述绝对长度时，移除所述第一层容器中显示的当前信息；根据移除的当前信息，进行下一轮滚动信息的滚动；进一步包括：设置第二层容器和第三层容器；在所述第二层容器中，添加禁止换行及绝对定位属性；在所述第三层容器中，添加滚动动画，从左侧位置0滚动到左侧位置‑100％；并无限循环；所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述绝对定位属性和所述滚动动画，进行不换行滚动显示所述新的滚动信息；进一步包括：为所述目标信息添加绝对定位、超出隐藏属性，并设置宽高为100％；所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：根据所述目标信息的绝对定位，在所述滚动信息结尾进入所述第一层容器的显示区域时，所述目标信息接续显示，并根据所述目标信息的超出隐藏属性，在所述显示区域之外的目标信息则不显示；进一步包括：为所述第一层容器设置绝对定位及超出隐藏属性；所述在所述第一层容器宽度滚动显示所述新的滚动信息，包括：确定所述第一层容器的显示区域在网页上的位置；在显示区域显示滚动信息，对超出显示区域部分的滚动信息进行隐藏，并应用于CCS网页。