历史版本2 :JS实现首尾相接的跑马灯 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.问题描述编辑

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

222


2.示例编辑

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

2.1准备模板

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

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


2.2添加公式

在A2单元格添加如下公式

"<div id=\"demo\" style=\"height:500px;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显示内容

将刚刚添加的公式的单元格,在单元格属性--其他属性,显示内容设置为用HTML显示内容


222


2.4添加js方法

设计器菜单点击模板--模板web属性,打开模板web属性对话框,找到分页预览设置。

在打开的对话框中,选择为该模板单独设置,并在最下方添加加载结束事件,如下图
222

将下方的js代码复制到新建的事件中

setTimeout(function(){ speed = 50; var tab = document.getElementById("demo"); var tab1 = document.getElementById("demo1"); var tab2 = document.getElementById("demo2"); tab2.innerHTML = tab1.innerHTML; tab.scrollTop = tab1.offsetHeight; function Marquee(){ if (tab.scrollTop >= tab1.offsetHeight) { tab.scrollTop-=tab2.offsetHeight; }else{ tab.scrollTop+=1; } } var MyMar=setInterval(Marquee,speed); },1500);

如下图
222


2.5预览效果

点击设计器的预览按钮,效果如下
222


3.总结编辑

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

4.扩展编辑

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