博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FineReport中如何实现自动滚屏效果
阅读量:6509 次
发布时间:2019-06-24

本文共 728 字,大约阅读时间需要 2 分钟。

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

图片描述

添加加载结束事件

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

图片描述

JS代码如下:

//从页面加载结束后延迟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)

保存与预览

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

转载地址:http://mkdfo.baihongyu.com/

你可能感兴趣的文章
1.电子商务支付方式有哪些 2.比较不同支付方式的优势劣势
查看>>
医疗卫生系统被爆漏洞,7亿公民信息泄露……
查看>>
神秘函件引发的4G+与全网通的较量
查看>>
CloudCC:智能CRM究竟能否成为下一个行业风口?
查看>>
追求绿色数据中心
查看>>
Web开发初学指南
查看>>
探寻光存储没落的真正原因
查看>>
高通64位ARMv8系列服务器芯片商标命名:Centriq
查看>>
中国人工智能学会通讯——融合经济学原理的个性化推荐 1.1 互联网经济系统的基本问题...
查看>>
戴尔为保护数据安全 推出新款服务器PowerEdge T30
查看>>
今年以来硅晶圆涨幅约达40%
查看>>
构建智能的新一代网络——专访Mellanox市场部副总裁 Gilad Shainer
查看>>
《数字视频和高清:算法和接口》一导读
查看>>
《中国人工智能学会通讯》——6.6 实体消歧技术研究
查看>>
如何在Windows查看端口占用情况及查杀进程
查看>>
云存储应用Upthere获7700万美元股权债务融资
查看>>
国家互联网应急中心何世平博士主题演讲
查看>>
洗茶,你误会了多少年?
查看>>
贵阳高新区力争打造“千亿级大数据园区”
查看>>
安防众筹不止于卖产品 思维拓展刺激消费
查看>>