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

目录:

1. 问题描述

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

2. cpt的自动滚屏/滚动

下面我们进行如下设置。
2.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)
2.2 保存并预览
保存模板，点击分页预览，就会出现上面的自动滚动效果。
注：用鼠标左击一下窗口即可停止滚动。
已完成模板可参考：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\newchart\advanced\IOS.cpt

3. 表单报表块设置冻结后自动滚动

3.1 打开报表
打开报表：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\multi_report\all.frm
3.2 报表块设置
选中表单中的报表块report0，点击工具栏上的冻结，弹出重复与冻结设置对话框，勾选并设置重复标题行从第1行至第2，勾选冻结第1行至第2行，如下图所示：
222
3.3 添加初始化后事件
选中报表块report0，添加初始化后事件，如下图所示：
222
js代码如下：
setTimeout(function(){ $("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden"; },100); //隐藏报表块report0的滚动条 window.flag=true; setTimeout(function(){ $("#frozen-center").mouseover(function() { window.flag=false; }) //鼠标悬停，滚动停止 $("#frozen-center").mouseleave(function() { window.flag=true; }) //鼠标离开，继续滚动 var old=-1; var interval=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)
js主要实现的功能是：表单报表块在冻结标题行后实现循环滚动，鼠标悬停暂停和鼠标离开继续滚动的效果(隐藏了滚动条)。悬停事件为mouseover，离开事件为mouseleave。
注：1.div[widgetname=REPORT0]")里需根据报表块名称修改，这里是report0;
注：如果想实现多报表块同时滚动，则将$("#frozen-center")替换为$(".frozen-center")，[0]表示报表块的位置，如果不是第一个需要换成对应的位置。
js代码如下：
setTimeout(function(){ $("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden"; },100); //隐藏报表块report0的滚动条 window.flag=true; setTimeout(function(){ $(".frozen-center").mouseover(function() { window.flag=false; }) //鼠标悬停，滚动停止 $(".frozen-center").mouseleave(function() { window.flag=true; }) //鼠标离开，继续滚动 var old=-1; var interval=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) 
如未设置冻结标题行，则将$("#frozen-center")替换为$(".reportContent")，安装了自定义滚动条插件的情况下该js不可用。
js代码如下：
setTimeout(function(){ //$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden"; $("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow="hidden"; },100); window.flag=true; setTimeout(function(){ $(".reportContent").mouseover(function() { window.flag=false; }) $(".reportContent").mouseleave(function() { window.flag=true; }) var old=-1; var interval=setInterval(function() { if(window.flag){ currentpos=$(".reportContent")[0].scrollTop; if (currentpos==old){ $(".reportContent")[0].scrollTop=0; } else { old=currentpos; $(".reportContent")[0].scrollTop=currentpos+1.5; } } },25); },1000)
3.4 效果预览
保存后，点击预览，效果如下图所示：
222

关键字：自动滚动 报表块 鼠标悬停

附件列表


主题： 二次开发
标签： 自动滚屏 滚动屏幕 大屏 js 已验证

文档内容仅供参考，如果你需要获取更多帮助，请咨询帆软技术支持
关于技术问题，您还可以通过帆软论坛获取帮助，论坛上有非常多的大神，有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题，可以联系帆软传说哥（微信ID：frbiaoge）