1. 首頁
  2. 問答
  3. HTML MARQUEE不能按預期工作

HTML MARQUEE不能按預期工作

2017-08-02 168 views
-3

我正在使用MARQUEE標記滾動三個句子。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文件中，並在屏幕上運行，我們可以看到第三句完成 – ManiMuthuPandi

+0

@ j08691感謝您的反饋;水平滾動文本的任何替代方法 – ManiMuthuPandi

回答

1

的marquee -Tag已棄用。請參閱：

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

替代方案：

的JavaScript libary：

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

CSS3：

https://codepen.io/jamesbarnett/pen/kfmKa（由詹姆斯·巴尼特 - 在谷歌搜索中找到）

來源

2017-08-02 13:48:36 fehrlich

+1

您不需要500行JS代碼來執行簡單的選取框效果。這可以通過幾行樣式的純CSS完成。 –

+0

其實例，你可以提供一個css3解決方案，如果你想 – fehrlich

+0

這真的沒有回答這個問題。你做了和我一樣的評論，再加上你只是指向一個鏈接作爲推薦。充其量，這是一條評論。 – j08691

0

的marquee tag was deprecated有很好的理由（可用性，可訪問等）

如果這些是要顯示給用戶一個滾動的基礎上的信息位，爲什麼不使用carousel？他們會更容易閱讀，並更容易返回。

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});

您需要下載與此相關的library code。

來源

2017-08-02 14:22:49

相關問題

 相關問題