JS实现自动滚屏/滚动效果

编辑
文档创建者:zsh331 (73316 )     浏览次数:9396次     编辑次数:30次     最近更新:ukae 于 2018-08-08     

目录:

1. 描述编辑

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

2. 操作步骤编辑

2.1示例一:普通报表的自动滚屏/滚动
添加加载结束事件
点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”后事件,如下图所示:
222
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 示例二:冻结设置下的自动滚屏/滚动
新建数据库查询ds1:SELECT * FROM 订单
如图所示,拖入数据列:
222
设置第一行为标题重复行,右键第一行如下图所示:
222
点击模板>重复与冻结设置,设置第一行为重复行、冻结行,具体如下图所示:
222
添加加载事件:
点击模板>模板Web属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图所示:
222
js代码如下:
if(window.interval2){clearInterval(window.interval2);} //从页面加载结束后延迟2000MS执行事件(滚动) setTimeout(function(){ //当鼠标点击时 $("#frozen-center").click(function() { //如果页面正在执行事件(滚动) if(interval) { //取消事件(滚动) clearInterval(interval); } }) var old=-1; //按照指定周期不断的调用滚动事件 window.interval2=setInterval(function() { currentpos=$("#frozen-center")[0].scrollTop; if (currentpos==old){ //取消事件(滚动) clearInterval(interval); //重新加载页面 window.location.reload(); } else { old=currentpos; //以25MS的速度每次滚动3.5PX $("#frozen-center")[0].scrollTop=currentpos+3.5; } } ,25); },2000)
2.3 示例三:冻结设置下的自动滚屏/滚动(鼠标悬停)
示例二预览的时候,鼠标点击之后,滚动会停止;鼠标移开,并不会再次滚动。
在此基础上,如果想实现鼠标悬停的效果,我们需要修改js代码。
添加加载事件:
点击模板>模板Web属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图所示:
222
js代码:
if(window.interval2){clearInterval(window.interval2);} setTimeout(function(){ $("#frozen-center").mouseover(function() { window.flag=false; }) //鼠标悬停,滚动停止 $("#frozen-center").mouseleave(function() { window.flag=true; }) //鼠标离开,继续滚动 var old=-1; window.interval2=setInterval(function() { if(window.flag){ currentpos=$("#frozen-center")[0].scrollTop; if (currentpos==old){ $("#frozen-center")[0].scrollTop=0; } else { old=currentpos; $("#frozen-center")[0].scrollTop=currentpos+1.5; } } },25); //以25ms的速度每次滚动3.5PX },1000)

3. 预览效果编辑

示例一:
保存模板,点击分页预览,就会出现如下所示的自动滚动效果。
注:用鼠标左击一下窗口即可停止滚动。
222

示例二:
保存模板,点击填报预览,就会出现如下所示的自动滚动效果。
注:用鼠标左击一下窗口即可停止滚动。
222

示例三:
保存模板,点击填报预览,就会出现如下的自动滚动效果。
鼠标悬停,滚屏停止;鼠标移开,继续滚屏。
注:用鼠标左击一下窗口不会停止滚动。此外还可以使用鼠标滚轮。
222

4. 已完成模板编辑

示例一:
模板效果在线查看请点击IOS平台年度数据报告
已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\IOS平台年度数据报告.cpt

示例二:
模板效果在线查看请点击冻结下滚屏示例一
已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\冻结下滚屏示例一.cpt

示例三:
模板效果在线查看请点击冻结下滚屏示例二
已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\冻结下滚屏示例二.cpt

关键字:自动滚动  鼠标悬停

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗? [ 去社区提问 ]