您当前的位置:
FineReport帮助文档 - 全面的报表使用教程和学习资料
>>
JS实现普通报表中自动滚屏/跑马灯效果
>> 历史版本
历史版本27 :JS实现普通报表中自动滚屏/跑马灯效果
返回文档
编辑时间:
04-18 11:23
历史版本:
最新历史版本
上一篇历史版本
下一篇历史版本
内容长度:
18214
图片数:
2
目录数:
2
修改原因:
调整页面
目录:
1. 问题描述
2. cpt的自动滚屏/滚动
1. 问题描述
编辑
对于一些特殊的模板,可能为了展示的更加丰富、全面会在一个页面放置很多图表、表格等内容。由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到js滚屏效果来解决,下面我们来介绍制作方法。
2. cpt的自动滚屏/滚动
编辑
下面我们进行如下设置。
2.1 添加加载结束事件
点击菜单
模板>模板web属性>分页预览设置
,选择“为该模板单独设置”,添加一个“加载结束”后事件,如下图所示:
js代码如下:
注:使用自定义滚动条插件时(1.2版本),需要将代码中的content-container换成scrollDiv
setTimeout(function(){ //鼠标点击结束 $('.content-container').click(function(){ if(timer){ clearInterval(timer); } }) var h=-1; var timer = setInterval(function(){ //获取当前滚动条高度 var current = $('.content-container')[0].scrollTop; if(current==h){ //滚动到底端,刷新屏幕,并返回顶端 clearInterval(timer); window.location.reload(); contentPane.$contentPane.scrollTop(0); } else { //以25ms/3.5px的速度滚动 h=current; $('.content-container')[0].scrollTop=h+3.5; } },25); },2000)
2.2 保存并预览
保存模板,点击分页预览,就会出现上面的自动滚动效果。
注:用鼠标左击一下窗口即可停止滚动。
已完成模板可参考:
%FR_HOME%\WebReport\WEB-INF\reportlets\demo\Oldchart\advanced\IOS平台年度数据报告.cpt
关键字:自动滚动 鼠标悬停