历史版本5 :JS实现普通报表中自动滚屏/跑马灯效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

一.问题描述编辑

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

二.实现思路编辑

在模板添加一个加载结束事件，通过JS脚本让整个页面从上到下重复的滚动。

三.示例编辑

下面我们设置如下。
3.1添加加载结束事件
打开模板分页预览设置---为该模板单独设置---添加‘加载结束事件’
222
代码如下：
//从页面加载结束后延迟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)
3.2保存并预览
保存模板，点击分页预览，就会出现如下效果（自动滚动）：