码迷,mamicode.com
首页 > 其他好文 > 详细

走马灯marquee标签首尾相连播放(chrome opera)

时间:2015-05-22 18:36:51      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

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

  

走马灯marquee标签首尾相连播放(chrome opera)

标签:

原文地址:http://www.cnblogs.com/zhengtulym/p/4522627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!