历史版本11 :JS实现普通报表中自动滚屏/跑马灯效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

对于一些特殊的模板，可能为了展示的更加丰富、全面会在一个页面放置很多图表、表格等内容。由于内容过多，超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到js滚屏效果来解决，下面我们来介绍制作方法。
222

2. 实现思路编辑

在模板添加一个加载结束事件，通过JS脚本让整个页面从上到下重复的滚动。

3. 示例编辑

下面我们进行如下设置。
3.1 添加加载结束事件
点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加一个“加载结束”后事件，如下图所示：
222
js代码如下：
注：使用自定义滚动条插件时（1.2版本），需要将代码中的content-container换成scrollDiv
//从页面加载结束后延迟2000MS执行事件（滚动） setTimeout(function(){ //当鼠标点击时 $(".content-container").click(function() { //如果页面正在执行事件（滚动） if(interval) { //取消事件（滚动） clearInterval(interval); } }) var old=-1; //按照指定周期不断的调用滚动事件 var interval=setInterval(function() { currentpos=$(".content-container")[0].scrollTop; if (currentpos==old){ //取消事件（滚动） clearInterval(interval); //重新加载页面 window.location.reload(); } else { old=currentpos; //以25MS的速度每次滚动3.5PX $(".content-container")[0].scrollTop=currentpos+3.5; } } ,25); },2000)
3.2 保存并预览
保存模板，点击分页预览，就会出现上面的自动滚动效果
注：用鼠标左击一下窗口即可停止滚动。
已完成模板可参考：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\newchart\advanced\IOS.cpt