历史版本2 :JS实现首尾相接的跑马灯 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1.问题描述编辑
在进行一些集团新闻内容展示时，可能需要如下图所示的这种动态效果，我们称之为跑马灯效果，那么要如何通过报表实现这个效果呢？
2.示例编辑
以下通过一个简单的例子来介绍实现这种效果的方法
2.1准备模板
这里我们准备一个简单的模板，可以内置数据集，或者任意数据表的内容，不影响效果的展示
如下图，将准备好的数据绑定的A1单元格，并设置为不扩展
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显示内容
2.4添加js方法
设计器菜单点击模板--模板web属性，打开模板web属性对话框，找到分页预览设置。
在打开的对话框中，选择为该模板单独设置，并在最下方添加加载结束事件，如下图
将下方的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);
如下图
2.5预览效果
点击设计器的预览按钮，效果如下
3.总结编辑
实际应用中，可以作为一块内容，放到整体报表中，另外如果熟悉html，css的，也可以自行修改样式。
4.扩展编辑
另外如果想在表单中引用，由于表单没有加载后事件，可以将js事件放在表单报表块的初始化后事件中，也能实现一样的效果，如下图