Question

我的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 = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    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;
}

Answer 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事件。

ASP.NET主页Javascript Marquee Animation按下按钮时停止

1 个答案: