FR决策表单JS实现自动滚屏/滚动效果

5人阅读 评论(0) 收藏 举报
分类:
选中决策报表中的报表块report0,点击工具栏上的冻结,弹出重复与冻结设置对话框,勾选并设置重复标题行从第1行至第2,勾选冻结第1行至第2行,
选中报表块report0,添加初始化后事件,如下图所示:
s代码如下:
代码复制
if(window.interval2){clearInterval(window.interval2);}  
setTimeout(function(){  
    $("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT0]").find("#frozen-center")[0].style.overflow="hidden";  
    },100);  
    //隐藏报表块report0的滚动条  
window.flag=true;  
setTimeout(function(){     
$("#frozen-center").mouseover(function()    
{    
  window.flag=false;    
  })  
  //鼠标悬停,滚动停止  
$("#frozen-center").mouseleave(function()    
{    
  window.flag=true;    
  })    
  //鼠标离开,继续滚动  
var old=-1;     
window.interval2=setInterval(function()    
{  
if(window.flag){  
   currentpos=$("#frozen-center")[0].scrollTop;    
   if (currentpos==old){  
    $("#frozen-center")[0].scrollTop=0;  
     }    
   else {    
      old=currentpos;    
      $("#frozen-center")[0].scrollTop=currentpos+1.5;    
        }    
      }  
    },25);  
    //以25ms的速度每次滚动3.5PX  
},1000)  
js主要实现的功能是:决策报表块在冻结标题行后实现循环滚动,鼠标悬停暂停和鼠标离开继续滚动的效果(隐藏了滚动条)。悬停事件为mouseover,离开事件为


mouseleave。
注:div[widgetname=REPORT0]")里需根据报表块名称修改,这里是report0;
注:如果想实现多报表块同时滚动,则将$("#frozen-center")替换为$(".frozen-center"),[0]表示报表块的位置,如果不是第一个需要换成对应的位置。
js代码如下:
代码复制
if(window.interval2){clearInterval(window.interval2);}  
setTimeout(function(){    
    $("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow="hidden";    
    $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow="hidden";    
    },100);    
    //隐藏报表块report0的滚动条    
window.flag=true;    
setTimeout(function(){       
$(".frozen-center").mouseover(function()      
{      
  window.flag=false;      
  })    
  //鼠标悬停,滚动停止    
$(".frozen-center").mouseleave(function()      
{      
  window.flag=true;      
  })      
  //鼠标离开,继续滚动    
var old=-1;       
window.interval2=setInterval(function()      
{    
if(window.flag){    
   currentpos=$(".frozen-center")[0].scrollTop;      
   if (currentpos==old){    
    $(".frozen-center")[0].scrollTop=0;    
     }      
   else {      
      old=currentpos;      
      $(".frozen-center")[0].scrollTop=currentpos+1.5;      
        }      
      }    
    },25);    
    //以25ms的速度每次滚动3.5PX    
},1000)  
如未设置冻结标题行,则将$("#frozen-center")替换为$(".reportContent"),安装了自定义滚动条插件(1.2版本)情况下可以将$("#frozen-center")替换成


$(".scrollDiv")。
js代码如下:
代码复制
if(window.interval2){clearInterval(window.interval2);}  
setTimeout(function(){  
    //$("div[widgetname=REPORT0]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow="hidden";  
    },100);  
      
window.flag=true;  
setTimeout(function(){     
$(".reportContent").mouseover(function()    
{    
  window.flag=false;    
  })  
$(".reportContent").mouseleave(function()    
{    
  window.flag=true;    
  })    
var old=-1;     
window.interval2=setInterval(function()    
{  
if(window.flag){  
   currentpos=$(".reportContent")[0].scrollTop;    
   if (currentpos==old){  
    $(".reportContent")[0].scrollTop=0;  
     }    
   else {    
      old=currentpos;    
      $(".reportContent")[0].scrollTop=currentpos+1.5;    
        }    
      }  
    },25);    
},1000)  
查看评论

js实现页面自动滚屏效果

  • 2012年12月23日 14:23
  • 3KB
  • 下载

JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)

本文我们实现纯JS方式的滚动广告效果。 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde...
  • renhanlinbsl
  • renhanlinbsl
  • 2016-08-15 11:58:14
  • 1339

安卓ScrollView实现自动滚屏

今天因项目需要,制作一个ScrollView的自动滚屏。在网上找了很多的代码,还是无法具体实现。具体网页有这些:比如http://www.eoeandroid.com/forum.php?mod=vi...
  • u011659659
  • u011659659
  • 2014-11-11 19:47:56
  • 1558

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016-09-22 20:51:30
  • 3611

android简单实现无限滚动,自动滚动的ViewPager

经常我们会在应用中看到一个可以自动滚动,并且无限滚动的一个ViewPager,百度谷歌上面也有很多关于这方面的教程,但是感觉都略显麻烦,而且封装的都不是很彻底。所以试着封装一个比较好用的ViewPag...
  • a641832648
  • a641832648
  • 2016-12-27 10:25:41
  • 916

原生 js 实现全屏滚动效果

原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度              2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。 废话不多说,直接上代码 html...
  • yinkaihui
  • yinkaihui
  • 2016-04-16 20:28:02
  • 7457

JavaScript实现网页的自动滚屏显示

如何实现网页的自动滚屏显示? 当双击网页的时候,网页将会自动向下滚动,再次单击时滚动停止。将下面的代码插入到之间:  var currentpos,timer; function initialize...
  • xinem
  • xinem
  • 2008-08-18 16:18:00
  • 2465

原生js实现全屏滚动

  • 2017年09月18日 11:42
  • 2KB
  • 下载

javaScript实现全屏页面滚动效果(优化)

在我读完javaScript DOM之后,对解释型的javaScript脚本语言有了更加深刻的感悟和理解,并使我的javaScript代码更加规范化。 接下来,我们转入今天我要分享的技术性问题:全屏页...
  • u013005050
  • u013005050
  • 2016-09-10 20:15:40
  • 931

实现屏幕自动滚动

使用滚动视图控件ScrollView的方法比较简单,只需要在LinearLayout外面增加一个ScrollView标记即可: ...
  • guoqingshuang
  • guoqingshuang
  • 2016-07-23 18:35:35
  • 194
    个人资料
    等级:
    访问量: 5240
    积分: 235
    排名: 32万+
    文章分类