1. ホーム
  2. 質問と答え
  3. html要素が画面を終了するときを検出します。

html要素が画面を終了するときを検出します。

2017-09-12 13 views
1

私はマーキーを持っています。 （タグ<マーキー>）。最初の要素（スパンクラス "span1"）が画面に表示されなくなったら、私に通知してください。例えばhtml要素が画面を終了するときを検出します。

enter image description here

http://jsfiddle.net/5o4ez17s/

<div id='container_marquee'> 
    <marquee id='mymarquee' behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();"> 
       <span class='span1'>first marquee text</span> 
       <span class='span2'>second marquee text</span> 
       <span class='span3'>third marquee text</span> 
       <span class='span4'>fourth marquee text</span> 
       <span class='span5'>fifth marquee text</span> 
    </marquee> 
    </div>

..：

alert("the first span is not visible on screen");

私は多分行うには、より効率的な方法があり、設定された間隔か何かを持っている必要はありませんそれ。おそらくあなたはリスニングイベントや何かを関連付けることができます。

出典

2017-09-12 yavg

+0

こんにちは@yang！私の答えをチェックしてください。あなたはいくつかのアイデアを得ることを望みます。または、より良い解決策が得られる場合は、回答を投稿してください。 –

+1

「」タグは、[ブラウザ]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee）と[W3C]（の両方で廃止されていますhttps://www.w3.org/wiki/HTML/Elements/marquee）代わりに 'jQuery'や' CSS'アニメーションを使うべきです。 – Jake

+0

@Jakeこのタグには特別なものがあります。アニメーションを再起動せずにリアルタイムでn個のスパンを追加して、無限のアニメーションのようなものにすることができます。 jqueryを使って私に起こる問題。 （この例では私はそれを反映していません） – yavg

答えて

0

ダニが終了したら、時間を計ってユーザーに警告することができます。

var ticks = 0; 
    var timeformarquee = 24; //how long it takes for marquee to hit the edge (seconds) 
    var clock = function(){ 
     ticks++; 
     if(ticks === timeformarquee){ 
     alert("The first span isn't visible on the screen"); 
     } 
    }; 
    window.setInterval(clock, 1000);

出典

2017-09-12 04:26:38

+0

ありがとう、しかし...これは私にとっては役に立たない – yavg

0

@yavg、私はsetInterval()はあなたの条件に応じてマーキーの視認性のトラックを維持するための唯一の方法だと思う：

は、次のスクリプトを試してみて、それに応じて修正：

$(function(){ 
    setInterval(function(){ 
     var spanWidth = $(".span1").width(); 
     /*console.log($(".span1").offset().left); 
     console.log($(window).width());*/ 
     if($(".span1").offset().left >= -spanWidth){ 
      console.log('Visible'); 
     }else{ 
      console.log('Not Visible'); 
     } 
    },1000); 
})

がそれを願っていますが手伝う。

出典

2017-09-12 04:50:32

+0

ありがとう！オフセットは何ですか？なぜこの "-spanWidth"をやっているのですか？ – yavg

+0

オフセットについては、jQueryの公式定義http://api.jquery.com/offset/をご確認ください。あなたは非常に良いアイデアを得るでしょう。実際に私は最初にspan1の幅、すなわちspanWidthを取得しています。そして、それを左側からspan1 divの現在の位置と比較しています。 –

+0

負のspanWidth平均span1を持つspan1現在の位置との比較は、ウィンドウの外にあります（見えません）。あなたはポイントを得ることを願っています。 –

関連する問題

 関連する問題