ASP.NET Masterpage Javascript Marquee Animation Остановка при нажатии кнопки

Question

У меня есть функция Javascript для анимации Marquee на моей главной странице ASP.NET, которая отлично работает при первой загрузке страницы, но затем останавливается при нажатии кнопки страницы. Любая идея, как это исправить?

я получил помощь от здесь, 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. Это позволит нам также вызвать функцию на postbackback UpdatePanel. Это позволяет нам запускать скрипт pageload как при начальной загрузке , так и в PostPacker 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 = '&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); 
} 

//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 t вместо этого.