1. ホーム
  2. 質問と答え
  3. HTML MARQUEEが正常に動作しない

HTML MARQUEEが正常に動作しない

2017-08-02 18 views
-3

MARQUEEタグを使用して3つのセンテンスをスクロールしています。HTML MARQUEEが正常に動作しない

最初の2文は正しくスクロールしますが、最後の文はdivの途中でスクロールを完了しています（フルスクリーン100％を使用している場合）。

marquee span { 
 
\t margin-right: 23%; 
 
\t } 
 
\t marquee p { 
 
\t white-space:nowrap; 
 
\t margin-right: 100px; 
 
\t }
<div style='color: #fff;position: fixed;bottom: -10px;padding: 8px 0px;width: 100%;background:#090270;z-index:100;'> 
 

 
<div style='float: left;width: 90%;padding: 3px 8px 0px 8px;margin-top:-5px;'> 
 

 
<marquee scrollamount='20'> 
 
<p> 
 
1. To decrease effort to plan 2018, we have copied your team planing from CW49/2017 to CW01/2018. By doing that you will have already all 2017 employees with their individual project setup available to start 2018 planning. That was only applied if no planning was avaialble yet. 
 
<span> </span> 
 
2. <a href='./rat/docs/RAT_Absence_2018.xlsx' title='Absence calendar 2018' target='_blank'>Absence calendar 2018 available</a>. Please select your team location and plan absence accordingly. Either use weekly or monthly planning. If detailed vacation planning per employee is known, please update the planning 
 
<span> </span> 
 
3. Team leaders are requested to use the information regarding target hire date for RAT planning in their project with respect to resources joining in future. This date can be found in Menu:Reports-><a href='./team-members'>Team Members List</a> page as (Internal - <span style='color:#093F7F'>DD-MON-YYYY</span>). Please use projx id:100000 for timeline prior to that date. 
 
</p> 
 
</marquee> 
 

 
</div> 
 
</div>

出典

2017-08-02 ManiMuthuPandi

+3

[]要素は廃止されており、使用しないでください。 ]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee） – j08691

+0

コードスニペットでは、エラーは表示されません。一部のブラウザでもサポートされていますが、必須ではありません。しかし、コードをHTMLファイルにコピーすると、画面上で実行すると、3番目の文が – ManiMuthuPandi

+0

@ j08691を完了したことがフィードバックに感謝します。テキストを水平方向にスクロールする方法 – ManiMuthuPandi

答えて

1

marquee -Tagは廃止されます。参照：

https://www.w3.org/wiki/HTML/Elements/marquee

代替：

ジャバスクリプトlibary：

https://github.com/aamirafridi/jQuery.Marquee

CSS3：

https://codepen.io/jamesbarnett/pen/kfmKa（ジェームズ・バーネットで - Google検索で見つかった）

出典

2017-08-02 13:48:36 fehrlich

+1

シンプルなマーキー効果を行うには500行のJSコードは必要ありません。これは、数行のスタイリングで純粋なCSSで行うことができます。 –

+0

その例では、 – fehrlich

+0

にしたい場合は、css3ソリューションを提供することができます。これは本当に質問に答えません。あなたは私がしたのと同じコメントを書いただけでなく、あなたはちょうど推奨としてリンクを指しています。最高でこれはコメントです。 – j08691

0

非常に良い理由のためmarquee tag was deprecated（ユーザビリティ、アクセシビリティ、など）

これらはあなたがローリング基づいてユーザーに表示する情報のビットがある場合は、なぜcarouselを使うのか？彼らは読みやすく、戻っても簡単です。あなたはこれに関連しlibrary codeをダウンロードする必要があります

HTML

<div class="carousel carousel-slider center" data-indicators="true"> 

    <div class="carousel-item red white-text" href="#one!"> 
     <h2>First Panel</h2> 
     <p class="white-text">To decrease effort to plan 2018, we have copied your team planning from CW49/2017 to CW01/2018. By doing that you will have already all 2017 employees with their individual project setup available to start 2018 planning. That was only applied if no planning was available yet.</p> 
    </div> 
    <div class="carousel-item amber white-text" href="#two!"> 
     <h2>Second Panel</h2> 
     <p class="white-text"> <a href='./rat/docs/RAT_Absence_2018.xlsx' title='Absence calendar 2018' target='_blank'>Absence calendar 2018 available</a>. Please select your team location and plan absence accordingly. Either use weekly or monthly planning. If detailed vacation planning per employee is known, please update the planning</p> 
    </div> 
    <div class="carousel-item green white-text" href="#three!"> 
     <h2>Third Panel</h2> 
     <p class="white-text">Team leaders are requested to use the information regarding target hire date for RAT planning in their project with respect to resources joining in future. This date can be found in Menu:Reports-><a href='./team-members'>Team Members List</a> page as (Internal - <span style='color:#093F7F'>DD-MON-YYYY</span>). Please use projx id:100000 for timeline prior to that date.</p> 
    </div> 

    </div>

jQueryの初期化

$('.carousel.carousel-slider').carousel({fullWidth: true});

。

出典

2017-08-02 14:22:49

関連する問題

 関連する問題