我的ASP.NET主页中有Marquee动画的Javascript函数,在首次加载页面时运行正常,但在按下页面按钮时停止。知道如何解决这个问题吗?
我从这里得到了帮助,Javascript Marquee to replace <marquee> tags
使用第二个答案
window.addEventListener('load', function () {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
m.addEventListener('mouseenter', function () {
step = 0;
}, true);
m.addEventListener('mouseleave', function () {
step = 3;
}, true);
var x = setInterval(go, 50);
}, true);
HTML
<div id="marquee">
1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>
CSS
#marquee {
background:#eee;
overflow:hidden;
white-space: nowrap;
}
答案 0 :(得分:1)
此问题与您在上面的评论中提到的 UpdatePanel 中的按钮有关。 UpdatePanel将导致页面回发而不重新触发 PageLoad 事件,因此与之相关的任何javascript都将丢失。
但是,您可以使用PageRequestManager
。这将允许我们在UpdatePanel回发上触发函数。这允许我们在初始加载和 UpdatePanel回发时运行页面加载脚本。唯一需要注意的是脚本块必须在您的ScriptManager 之后。如果可能的话,我建议您在</body>
之前移动它。
基本示例:
//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();
//On postback of UpdatePanel
prm.add_endRequest(function () {
alert("UpdatePanel was just triggered!");
});
//On pageload
window.addEventListener('load', function () {
alert("Initial page load!");
}, true);
您的例子:
//Because we now have to call our function on both Page Load AND UpdatePanel postback, let's put it in function
function pageInit() {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
m.addEventListener('mouseenter', function () {
step = 0;
}, true);
m.addEventListener('mouseleave', function () {
step = 3;
}, true);
var x = setInterval(go, 50);
}
//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();
//On postback of UpdatePanel
prm.add_endRequest(function () {
pageInit();
});
//On pageload
window.addEventListener('load', function () {
pageInit();
}, true);
如果某些事情你只想在初始加载时发生,并且在UpdatePanel回发上不,你可以将它们从pageInit()
函数中取出并放回到你的而是load
事件。