html⾃动滚动,JS实现⾃动滚屏滚动效果
3.1 打开报表
打开报表：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\multi_report\all.frm
3.2 报表块设置
选中表单中的报表块report0，点击⼯具栏上的冻结，弹出重复与冻结设置对话框，勾选并设置重复标题⾏从第1⾏⾄第2，勾选冻结第1⾏⾄第2⾏，如下图所⽰：
3.3 添加初始化后事件
选中报表块report0，添加初始化后事件，如下图所⽰：
js代码如下：
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;
var interval=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。
注：1.div[widgetname=REPORT0]")⾥需根据报表块名称修改，这⾥是report0;
注：如果想实现多报表块同时滚动，则将$("#frozen-center")替换为$(".frozen-center")，[0]表⽰报表块的位置，如果不是第⼀个需要换成对应的位置。
js代码如下：
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;
var interval=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
js控制滚动条},1000)
如未设置冻结标题⾏，则将$("#frozen-center")替换为$(".reportContent")，安装了⾃定义滚动条插件的情况下该js不可⽤。js代码如下：
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;
var interval=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)
3.4 效果预览
保存后，点击预览，效果如下图所⽰：
关键字：⾃动滚动 报表块 ⿏标悬停

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。