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)

保存与预览

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

时间: 2024-12-20 13:19:09

FineReport中如何实现自动滚屏效果的相关文章

jquery实现自动滚屏效果,适用用公告新闻等滚屏

从网络上找到的例子,自己做了下扩展,原示例是向上滚动,扩展了一个向下滚动的方法: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</title> <style ty

基于 ECharts 封装甘特图并实现自动滚屏

项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装 经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件,所以这里只介绍甘特图组件的实现,图表的初始化.数据更新.自适应等不在这里介绍 一.约定数据格式 EChart 本身没有甘特图,但可以通过 EChart 提供的“自定义”方法 type: 'custom' 开发 const option = { series: [{ type: 'custom',

编程练习--模拟安装程序时的信息滚屏效果

第一次安装Discuz时,有一个数据库的安装过程,看到会自动滚屏显示的信息,感觉非常好奇,由于当时主要从事后端程序的开发,对前端这些神奇的效果,也只能是欣赏一下子. 现在突然想到要自己来实现这个效果,作为今天的编程练习,实属对当时那个效果的怀念. 先上一个朴素无奇的静态效果图: 点这里查看动态的在线演示效果:http://sandbox.runjs.cn/show/jvl11v0d 核心代码: function install(){ if(message.length>0){ var text

自动滚屏代码

<html> <head> <title>自动滚屏代码丨轻质隔墙板|kiddy官网</title> </head> <body> <script language="JavaScript"> var position = 0; function scroller() { if (position !=700 ) { position++; scroll(0,position); clearTimeout

网页自动滚屏播放

好长时间不做网页了,今天老板说要做一个展示的demo,让这个demo 自动的播放 用js做了一个滚屏播放的代码 <script type="text/javascript"> var done = true; var speed = 4 //设置速度 var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1 function initialize() { startit() } function scrollwindow(

JS 滚轮事件 滚屏效果

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下. 其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下. 监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener. 有Kissy版

文字通知滚屏效果

网上方法有很多,但是太复杂,我在此只收录两种 代码区: css随意,JS代码:每过三秒换一条,移动速度为500,循环滚动 效果 还有一种旧的方法,已经被启用,是连续循环,无停顿的一种,也比较简洁 <MARQUEE id=a onmouseover=a.stop() style="FONT-SIZE: 9pt; COLOR: white" onmouseout=a.start() scrollAmount=2 direction=up width=150 bgColor=#6699

js实现双击滚屏效果

<body onDblClick="s=setInterval('scrollBy(0,2)',50)" onMousedown="clearInterval(s)" >

js中网页图片自动更换的效果

<script> var arr=new Array(); arr[0]="url(images/city.jpg)"; arr[1]="url(images/desert.jpg)"; arr[2]="url(images/flower.jpg)"; var i=0; function changeimage() { if(i==3) { i=0; } var div=document.getElementById("ap