Question

我使用MARQUEE标签滚动三个句子。

前2个句子正确滚动，而最后一个是完成div中间的滚动（当我使用全屏100％时）。

marquee span { 
	margin-right: 23%; 
	} 
	marquee p { 
	white-space:nowrap;
	margin-right: 100px; 
	}

<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>

Answer 1

不推荐使用marquee - 代码。参见：

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

备选方案：

javascript图书馆：

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

css3：

https://codepen.io/jamesbarnett/pen/kfmKa（由James Barnett撰写 - 在谷歌搜索中找到）

Answer 2

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

如果您想要滚动显示这些信息，为什么不使用carousel？它们更容易阅读，更容易回归。

<强> HTML

belongs_to :character

validates :character_id, presence: true

before_create do
  if self.character.type.is_a? User
    self.icon_url = '/assets/icon5.png'
    self.post_url = '/assets/icon6.png'
  else
    self.icon_url = '/assets/icon7.png'
    self.post_url = '/assets/icon8.png'
  end
end

jQuery初始化

<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>

您需要下载与此相关联的library code。

HTML MARQUEE无法正常工作

2 个答案: