1. 首页
  2. 问答
  3. HTML MARQUEE不能按预期工作

HTML MARQUEE不能按预期工作

2017-08-02 169 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

相关问题

 相关问题