当前位置: 首页 > news >正文

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

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

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

相关文章:

  • Linux如何查看进程、杀死进程、启动进程等常用命令
  • ViewPager结合view无限滑动
  • 30个php操作redis常用方法代码例子
  • 替换值
  • git简易教程
  • java的PDF纵横向打印
  • 微信三方登录相关(Swift)
  • 大数加法模板
  • System类
  • PyOdps 0.4版本发布,从一个故事说起
  • 电话面试总结
  • link visited hover actived顺序
  • Log4Net 在ASP.NET WebForm 和 MVC的全局配置
  • 也谈谈Unity的transform使用
  • 多个文本框录入,使用回车键替找Tab键
  • 10个确保微服务与容器安全的最佳实践
  • Bootstrap JS插件Alert源码分析
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • happypack两次报错的问题
  • jquery ajax学习笔记
  • React-redux的原理以及使用
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • 从伪并行的 Python 多线程说起
  • 分布式熔断降级平台aegis
  • 工程优化暨babel升级小记
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 解析带emoji和链接的聊天系统消息
  • 微服务框架lagom
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 硬币翻转问题,区间操作
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • 2017年360最后一道编程题
  • 回归生活:清理微信公众号
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • ​linux启动进程的方式
  • ​渐进式Web应用PWA的未来
  • #include
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (排序详解之 堆排序)
  • (十一)手动添加用户和文件的特殊权限
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • .net Application的目录
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .Net的DataSet直接与SQL2005交互
  • .net企业级架构实战之7——Spring.net整合Asp.net mvc
  • /boot 内存空间不够
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [\u4e00-\u9fa5] //匹配中文字符
  • []常用AT命令解释()
  • [Android]使用Android打包Unity工程