JS实现跑马灯效果

目录:

1. 问题描述

在进行一些集团新闻内容展示时，可能需要如下图所示的这种动态效果（无缝滚动），我们称之为跑马灯效果，那么要如何通过报表实现这个效果呢？

222

区别于自动滚屏效果，自动滚屏是整个页面进行滚动，跑马灯效果为页面中某个部分进行滚动。

注：实际应用中，可以作为一块内容，放到整体报表中，另外如果熟悉html，css的，也可以自行修改样式。

注：如果不想通过写代码的方法，也可以直接使用官方提供的插件滚动消息控件

2. 示例

以下通过一个简单的例子来介绍实现这种效果的方法

2.1准备模板

这里我们准备一个简单的模板，可以内置数据集，或者任意数据表的内容，不影响效果的展示，这里以内置数据集为例：


222

将准备好的数据绑定的A1单元格，并设置为不扩展，如下图：

222

2.2 添加公式

在A2单元格添加如下公式：

  1. "<div id=\"demo\" style=\"height:250px;overflow:hidden;\"> <div id=\"indemo\" style=\"height:200%;\"> <div id=\"demo1\"> <br />"+REPLACE(A1,",","<br /><br />")+"<br /><br /> </div> <div id=\"demo2\"></div> </div> </div>"  

注1：公式是为了将A1单元格的内容拼接到html语句中，主要是这里的replace公式，如果数据内容不在A1单元格，要根据内容更改，其他前后均不需要改动
注2：公式中的 demo，demo1 ，demo2会在js中引用，请不要改名字，另外添加\是为了和公式里本身的引号区分

2.3 设置HTML显示内容

将刚刚添加的公式的A2单元格，在单元格属性>其他属性，显示内容设置为用HTML显示内容，如下图：

222

2.4 添加js方法

点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加加载起始事件，js为：

  1. setTimeout(function(){ speed = 50;          
  2. var tab = document.getElementById("demo");  
  3. var tab1 = document.getElementById("demo1");  
  4. var tab2 = document.getElementById("demo2");  
  5. tab2.innerHTML = tab1.innerHTML;  
  6. tab.scrollTop = tab1.offsetHeight;  
  7. function Marquee(){  
  8.     if (tab.scrollTop >= tab1.offsetHeight) {  
  9.         tab.scrollTop-=tab2.offsetHeight;  
  10.     }else{  
  11.         tab.scrollTop+=1;  
  12.     }  
  13. }  
  14. var MyMar=setInterval(Marquee,speed);  
  15. },1500);  

具体设置如下图：


222

2.5 预览效果

点击分页预览，即可实现跑马灯效果。
222

3. 扩展

另外如果想在决策报表中引用，由于决策报表没有加载后事件，可以将js事件放在决策报表的报表块的初始化后事件中，也能实现一样的效果，如下图：

222

4. 决策报表定时刷新及滚动

使用决策报表进行大屏展示时，报表块需要定时刷新以及滚动，而使用上述滚动js后，发现报表块第一次刷新后滚动效果没有了，为什么会这样呢？
原因是经过定时刷新后，跑马灯的定时器消失了。
这时可通过修改决策报表的报表块的js事件来完成定时刷新和滚动，如下图所示：
222
js代码如下：
  1. var form = this.options.form;  
  2. setInterval(function() {  
  3.      form.getWidgetByName('report0').gotoPage(1,"{}",true);  
  4.     $(".loading-ec-indicator").eq(0).remove();  
  5.     $(".text-indicator").remove();  
  6.     setTimeout(function(){ speed = 50;  
  7. var tab = document.getElementById("demo3");  
  8. var tab1 = document.getElementById("demo4");  
  9. var tab2 = document.getElementById("demo5");  
  10. tab2.innerHTML = tab1.innerHTML;  
  11. tab.scrollTop = tab1.offsetHeight;  
  12. function Marquee(){  
  13.     if (tab.scrollTop >= tab1.offsetHeight) {  
  14.         tab.scrollTop-=tab2.offsetHeight;  
  15.     }else{  
  16.         tab.scrollTop+=1;  
  17.     }  
  18. }  
  19. var MyMar=setInterval(Marquee,speed);  
  20. },1500);  
  21.     }, 5000  
  22. ) ;  
保存后点击预览，在滚动的同时也可以进行定时刷新。
222



附件列表


主题：
标签： html 特效 已验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）