HTML MARQUEE不能按预期工作
问题描述:
我正在使用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>
答
的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(由詹姆斯·巴尼特 - 在谷歌搜索中找到)
答
的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。
['
在代码片段中,我们看不到错误。但是,如果我们将代码复制到HTML文件中,并在屏幕上运行,我们可以看到第三句完成 – ManiMuthuPandi
@ j08691感谢您的反馈;水平滚动文本的任何替代方法 – ManiMuthuPandi