marquee似乎沒有設置首尾相連播放的屬性,內容滾動時總會留出一段marquee本身長度的空隙,某些情況下很不方便;
搗鼓了一會,得出一種解決辦法,關鍵有兩點:
1、將需要滾動的內容復制一份於同一行首尾相連放置,假設現在需要滾動的內容長度為X,將marquee的長度設為x/2;
2、對marquee的內容絕對定位,left為-x/2;
PS:firefox 37.0.2中完全不滾動,ie 11中還是會出現間隔空白;希望有人可以給解決一下這兩個瀏覽器的兼容性問題。
代碼如下:
<!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>
