ASP.NET Masterpage Javascript Marqueeアニメーションがボタンが押されたときに停止する

Question

ASP.NET Masterページで、Marqueeアニメーション用のJavascript機能があります。ページが最初に読み込まれたときに正常に動作しますが、ページボタンを押すと停止します。どのようにこれを修正するための任意のアイデア？二答え

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を使用して、私はここからの助けを得

、Javascript Marquee to replace <marquee> tags

<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は、イベントを再起動せずにページをポストバックさせるため、それに関連付けられたすべてのJavaScriptが失われます。

でもPageRequestManagerを使用できます。これにより、UpdatePanelポストバックファンクションがにトリガされるようになります。これにより、初期ロードと UpdatePanelポストバックの両方でpageloadスクリプトを実行できます。唯一の警告は、スクリプトブロックの後にスクリプトブロックがになっていることです。可能であれば、</body>の直前に移動することをお勧めします。

Basicの例：

//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。