Javascript Continuous Scroll - 加快页面刷新速度

时间:2013-07-15 19:13:32

标签: javascript continuous ticker

我有一个javascript数据自动收录器,我试图在IBM Cognos中实现。我在网上找到了一些代码,我在其中进行了一些更改以使用我的设置。在页面加载时,自动收报机以一种速度滚动,但在页面刷新时,自动收报机加速。我正在努力解决这个问题。

为了让我的自动收报机在IBM Cognos内部工作,我已经在包含可变数据的表对象周围的块中添加了我的代码。表中的数据,在页面加载时显示月份的数据,但是用户可以选择他们希望看到的数据的每日视图 - 使数据集更小(因此页面刷新的数据变得更少) )。

下面的代码显示了我到目前为止所做的工作,但是,它说的是“测试,测试测试”,这是我在变量表中包装此代码的地方。

我的目标是即使在页面重新加载后也能以连续的速度滚动滚动条。

我感谢您的反馈!到目前为止,这是我的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#marqueecontainer{
position: relative;
width: 1020px; /*marquee width */
height: 23px; /*marquee height */
background-color:#FFF;
color:black;
overflow: hidden;
border: 1px #FFF;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?


var copyspeed=marqueespeed // marqueespeed = 1
var pausespeed=(pauseit==0)? copyspeed: 0 // if pauseit = 0 then pausespeed = copyspeed if not then pausespeed = 0
var actualwidth='' // actualwidth is undefined

var cross_marque;
var cross_marque2;

var Start = 1

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
//marqueewidth=document.getElementById("marqueecontainer").offsetWidth 
actualwidth=cross_marquee.firstChild.offsetWidth    
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

function Scroll(){
if(Start==1)
{initializemarquee();}
else
{Start=0;}
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script>
</head> 

<body onload=Scroll();>

<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed;"  onMouseout="copyspeed=marqueespeed;"> <span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
 <!--SCROLL CONTENT HERE--> 
<table >
<tr>
<td nowrap>
testing testing testing
</td>
</tr>
</table>
</nobr></span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
</body>

1 个答案:

答案 0 :(得分:1)

以下代码现在正在运行!我添加了一个if语句和 - clearInterval(lefttime);到初始化选框功能。现在代码在页面刷新时是一致的,如果用户选择了一个也刷新页面的提交按钮。

<html>
<style type="text/css">

#marqueecontainer{
position: relative;
width: 1020px; /*marquee width */
height: 30px; /*marquee height */
background-color:#FFF;
color:black;
overflow: hidden;
border: 1px #FFF;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

var delayb4scroll=300 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?


var copyspeed=marqueespeed // marqueespeed = 1
var pausespeed=(pauseit==0)? copyspeed: 0 // if pauseit = 0 then pausespeed = copyspeed if not then pausespeed = 0
var actualwidth='' // actualwidth is undefined

var cross_marquee;
var cross_marquee2;
var lefttime;
var lefttime;


var Start = 1;

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
    cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
else
  cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
    cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
else    
    cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"

}

function initializemarquee(){
  if(Start==1) {
    clearInterval(lefttime);
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee2=document.getElementById("vmarquee2")
    cross_marquee.style.left=0
//marqueewidth=document.getElementById("marqueecontainer").offsetWidth 
    actualwidth=cross_marquee.firstChild.offsetWidth    
    cross_marquee2.style.left=actualwidth+4+'px'
    cross_marquee2.innerHTML=cross_marquee.innerHTML
    Start=0;
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll) 
    }
}

function Scroll() {
    initializemarquee();
 }    

//onload = Scroll(); // in Cognos this goes here -- in regular html goes in body tag (below)


if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script>
<body onLoad="Scroll()">
<div style="overflow:hidden" >
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed;"  onMouseout="copyspeed=marqueespeed;"> <span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
<!--SCROLL CONTENT HERE-->
<table >
<tr>
<td nowrap>
test test test test test test 
</td>
</tr>
</table>
</nobr> </span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
</body>
</html>