JS实现自动滚屏滚动效果
- 格式：docx
- 大小：20.21 KB
- 文档页数：7
JS实现自动滚屏滚动效果
对于一些特殊的模板，可能为了展示的更加丰富、全面会在一个页面放置很多图表、表格等内容。由于内容过多，超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到js滚屏效果来解决，下面我们来介绍制作方法。
2. cpt的自动滚屏/滚动编辑
下面我们进行如下设置。
2.1 添加加载结束事件
点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加一个“加载结束”后事件，如下图所示：
js代码如下：
注：使用自定义滚动条插件时（1.2版本），需要将代码中的content-container换成scrollDiv
1. setTimeout(function(){
2. //鼠标点击结束
3. $('.content-container').click(function(){
4. if(timer){
5. clearInterval(timer);
6. }
7. })
8. var h=-1;
9. var timer = setInterval(function(){
10. //获取当前滚动条高度
11. var current = $('.content-container')[0].scrollTop;
12. if(current==h){ 13. //滚动到底端，刷新屏幕，并返回顶端
14. clearInterval(timer);
15. window.location.reload();
16. contentPane.$contentPane.scrollTop(0);
17. }
18. else
19. {
20. //以25ms/3.5px的速度滚动
21. h=current;
22. $('.content-container')[0].scrollTop=h+3.5;
23. }
24. },25);
25. },2000)
2.2 保存并预览
保存模板，点击分页预览，就会出现上面的自动滚动效果。
注：用鼠标左击一下窗口即可停止滚动。
已完成模板可参考：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\Oldchart\advanced\IOS平台年度数据报告.cpt
3. 决策报表块设置冻结后自动滚动编辑
3.1 打开报表
打开报表：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\sales\多维度营收分析.frm
3.2 报表块设置
选中决策报表中的报表块report0，点击工具栏上的冻结，弹出重复与冻结设置对话框，勾选并设置重复标题行从第1行至第2，勾选冻结第1行至第2行，如下图所示：
3.3 添加初始化后事件
选中报表块report0，添加初始化后事件，如下图所示：
js代码如下：
1. if(window.interval2){clearInterval(window.interval2);}
2. setTimeout(function(){
3. $("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
4. $("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden";
5. },100);
6. //隐藏报表块report0的滚动条
7. window.flag=true;
8. setTimeout(function(){
9. $("#frozen-center").mouseover(function()
10. {
11. window.flag=false;
12. })
13. //鼠标悬停，滚动停止
14. $("#frozen-center").mouseleave(function()
15. {
16. window.flag=true;
17. })
18. //鼠标离开，继续滚动
19. var old=-1;
20. window.interval2=setInterval(function()
21. {
22. if(window.flag){
23. currentpos=$("#frozen-center")[0].scrollTop; 24. if (currentpos==old){
25. $("#frozen-center")[0].scrollTop=0;
26. }
27. else {
28. old=currentpos;
29. $("#frozen-center")[0].scrollTop=currentpos+1.5;
30. }
31. }
32. },25);
33. //以25ms的速度每次滚动3.5PX
34. },1000)
js主要实现的功能是：决策报表块在冻结标题行后实现循环滚动，鼠标悬停暂停和鼠标离开继续滚动的效果(隐藏了滚动条)。悬停事件为mouseover，离开事件为mouseleave。
注：div[widgetname=REPORT0]")里需根据报表块名称修改，这里是report0;
注：如果想实现多报表块同时滚动，则将$("#frozen-center")替换为$(".frozen-center")，[0]表示报表块的位置，如果不是第一个需要换成对应的位置。
js代码如下：
1. if(window.interval2){clearInterval(window.interval2);}
2. setTimeout(function(){
3. $("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden";
4. $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden";
5. },100);
6. //隐藏报表块report0的滚动条
7. window.flag=true; 8. setTimeout(function(){
9. $(".frozen-center").mouseover(function()
10. {
11. window.flag=false;
12. })
13. //鼠标悬停，滚动停止
14. $(".frozen-center").mouseleave(function()
15. {
16. window.flag=true;
17. })
18. //鼠标离开，继续滚动
19. var old=-1;
20. window.interval2=setInterval(function()
21. {
22. if(window.flag){
23. currentpos=$(".frozen-center")[0].scrollTop;
24. if (currentpos==old){
25. $(".frozen-center")[0].scrollTop=0;
26. }
27. else {
28. old=currentpos;
29. $(".frozen-center")[0].scrollTop=currentpos+1.5;
30. }
31. }
32. },25);
33. //以25ms的速度每次滚动3.5PX
34. },1000)
如未设置冻结标题行，则将$("#frozen-center")替换为$(".reportContent")，安装了自定义滚动条插件(1.2版本)情况下可以将$("#frozen-center")替换成$(".scrollDiv")。
js代码如下：
1. if(window.interval2){clearInterval(window.interval2);}
2. setTimeout(function(){
3. //$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";
4. $("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow="hidden";
5. },100);
6.
7. window.flag=true;
8. setTimeout(function(){
9. $(".reportContent").mouseover(function()
10. {
11. window.flag=false;
12. })
13. $(".reportContent").mouseleave(function()
14. {
15. window.flag=true;
16. })
17. var old=-1;
18. window.interval2=setInterval(function()
19. {
20. if(window.flag){
21. currentpos=$(".reportContent")[0].scrollTop;
22. if (currentpos==old){
23. $(".reportContent")[0].scrollTop=0;
24. }
25. else {
