Chinaunix首页 | 论坛 | 博客
  • 博客访问: 201286
  • 博文数量: 97
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1024
  • 用 户 组: 普通用户
  • 注册时间: 2014-04-03 09:03
文章分类
文章存档

2017年(17)

2016年(54)

2015年(25)

2014年(1)

我的朋友

分类: Web开发

2017-03-06 10:12:49

对于一些特殊的模板,可能为了展示的更加丰富、全面会在一个页面放置很多图表。表格等内容。由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到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)

保存与预览

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

阅读(566) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~