Javascript Continuous Scroller — ускорение при обновлении страницы

У меня есть тикер данных 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>

javascript continuous ticker
person charlotte2483    schedule 15.07.2013    source источник
comment
Кто-то может помочь вам исправить ваш код, если вы его опубликуете, но рекомендации о том, где найти код или библиотеку, не относятся к теме.   -  person Bill the Lizard    schedule 15.07.2013
comment
Помимо того, что я не по теме, я не уверен, что понимаю проблему, которую вы пытаетесь решить.   -  person Mathletics    schedule 15.07.2013
comment
Спасибо за добавление вашего кода. Теперь вопрос снова открыт.   -  person Adam Lear    schedule 16.07.2013
comment
Итак, при тестировании - я вижу, что если я помещу предупреждение в initializemarquee, при обновлении страницы - initializemarquee запускается во второй раз... Может ли это быть причиной изменения скорости?   -  person charlotte2483    schedule 16.07.2013

Ответы (1)


arrow_upward
1
arrow_downward

Следующий код теперь работает! Я добавил оператор 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>
person charlotte2483    schedule 18.07.2013