FineReport中如何实现自动滚屏效果

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

 

 

添加加载结束事件

点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加一个“加载结束”后事件，如下图所示：

 

 

JS代码如下：

点击(此处)折叠或打开

1. //从页面加载结束后延迟2000MS执行事件（滚动）
   
2. setTimeout(function(){
   
3. //当鼠标点击时
   
4. $(".content-container").click(function()
   
5. {
   
6. //如果页面正在执行事件（滚动）
   
7.   if(interval)
   
8.   {
   
9. //取消事件（滚动）
   
10.   clearInterval(interval);
    
11.   }
    
12. })
    
13. var old=-1;
    
14. //按照指定周期不断的调用滚动事件
    
15. var interval=setInterval(function()
    
16. {
    
17. currentpos=$(".content-container")[0].scrollTop;
    
18. if (currentpos==old){
    
19. //取消事件（滚动）
    
20. clearInterval(interval);
    
21. //重新加载页面
    
22. window.location.reload();
    
23. }
    
24. else
    
25. {
    
26. old=currentpos;
    
27. //以25MS的速度每次滚动3.5PX
    
28. $(".content-container")[0].scrollTop=currentpos+3.5;
    
29. }
    
30. }
    
31. ,25);
    
32. },2000)

保存与预览

保存模板，点击分页预览，就会出现上面的自动滚动效果。如果想要停止滚动的话，用鼠标左键点击一下窗口即可。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/21472864/viewspace-2134751/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/21472864/viewspace-2134751/