1. 程式人生 > >FR決策表單JS實現自動滾屏/滾動效果

FR決策表單JS實現自動滾屏/滾動效果

選中決策報表中的報表塊report0,點選工具欄上的凍結,彈出重複與凍結設定對話方塊,勾選並設定重複標題行從第1行至第2,勾選凍結第1行至第2行,
選中報表塊report0,新增初始化後事件,程式碼如下:
 

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)