marquee標籤跑馬燈連續無空白播放效果純CSS（chrome opera有效）

時間 2019-12-09

標籤 marquee 標籤馬燈連續空白播放效果 css chrome opera 有效欄目 CSS 简体版

原文原文鏈接

marquee彷佛沒有設置首尾相連播放的屬性，內容滾動時總會留出一段marquee自己長度的空隙，某些狀況下很不方便；css

搗鼓了一會，得出一種解決辦法，關鍵有兩點：html

一、將須要滾動的內容複製一份於同一行首尾相連放置，假設如今須要滾動的內容長度爲X，將marquee的長度設爲x/2;chrome

二、對marquee的內容絕對定位，left爲-x/2;瀏覽器

PS：firefox 37.0.2中徹底不滾動，ie 11中仍是會出現間隔空白；但願有人能夠給解決一下這兩個瀏覽器的兼容性問題。ui

代碼以下：this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>marquee標籤跑馬燈連續無空白播放效果 純CSS（chrome opera有效）</title>
<style type="text/css">
div {
	width: 360px;
	height: 200px;
	margin: 0 auto;
	background: #CF9;
}
marquee {
	position: relative;
	width: 360px;
	height: 100px;
	overflow:hidden;
}
#marquee1 {
	background: #CCC;
}
#marquee2 {
	background: #999;
}
a {
	display: block;
	width:720px;
	text-decoration: none;
	color: #666;
	font: 40px/40px 'Microfost YaHei', SimSun;
	background: #FC0;
}
#marquee1>a {
	position: absolute;
	z-index:99;
	left: -360px;
	top: 0;
}
</style>
</head>

<body>
<div>
  <marquee id="marquee1" direction="left" scrollamount=6 onmouseover="this.stop()" onmouseout="this.start()">
  <!--目前只在這裏a的長度恰好爲marquee的兩倍，（在chrome 40、opera 27.0中）實際上a的長度只要大於這個值均可以保證無縫滾動，多出的部分不參與滾動；firefox 37.0.2中徹底不滾動，ie 11中仍是會出現空隙-->
  <a href="#">這裏是首尾相連播放這裏是首尾相連播放</a>
  </marquee>
  <marquee id="marquee2" direction="left" scrollamount=6 onmouseover="this.stop()" onmouseout="this.start()">
  <a href="#">這裏是對比正常播放這裏是對比正常播放</a>
  </marquee>
</div>
</body>
</html>