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>

　　

marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）的更多相关文章

  1. marquee实现跑马灯

    <!DOCTYPE html><html> <head><title>跑马灯大全</title> </head> <bod ...

  2. Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  3. android 总结（样式）—跑马灯 button的点击效果 RadioGroup 实现滑动的效果 button 下面有阴影 卡片样式

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content&qu ...

  4. js+css简单效果（幕布，跑马灯）

    2.js普通的盒子,css的优先级 css的优先级 !important >>>>>  style 行内样式  >>>>> #id选择器 # ...

  5. 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题

    说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...

  6. HTML连载10-details标签&summary标签&marquee标签

    ​1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: ...

  7. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...

  8. Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  9. Textview在Listview中实现跑马灯效果

    textview添加属性:   android:singleLine="true" 表示单行显示   android:ellipsize="marquee" 设 ...

随机推荐

  1. md5代码实现

    参考: 1.http://blog.csdn.net/iaccepted/article/details/8722444 2.http://hi.baidu.com/gh0st_lover/item/ ...

  2. css的checkbox样式变化

    1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...

  3. html语义化小记录

    1.头部标签 <header></header> 2.大块集合 <article></article> 3.主要集和 <main></ ...

  4. CentOS6.6下DRBD+HeartBeat+NFS配置

    一.DRBD配置 Distributed Replicated Block Device(DRBD)是一个用软件实现的.无共享的.服务器之间镜像块设备内容的存储复制解决方案. 我们可以理解为它其实就是 ...

  5. 如何看待Linux操作系统的用户空间和内核空间

    作为中央核心处理单元的CPU,除了生产工艺的不断革新进步外,在处理数据和响应速度方面也需要有权衡.稍有微机原理基础的人都知道Intel X86体系的CPU提供了四种特权模式ring0~ring3,其中 ...

  6. python pip更换下载源(转)

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  7. coffeescript 1.6.3使用帮助

    CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque ...

  8. JS中map、forEach、filter、reduce等Array新增方法的区别

    数组在各个编程语言中的重要性不言而喻,但是在之前的JavaScript中数组虽然功能已经很强大,但操作方法并不完善,在ECMAScript5中做了适当的补充. Array.isArray(elemen ...

  9. [ACM] POJ 2151 Check the difficulty of problems (概率+DP）

    Check the difficulty of problems Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4748   ...

  10. Android API Guides---Host-based Card Emulation

    Host-based Card Emulation 很多提供NFC功能的Andr​​oid手机已经支持NFC卡模拟.在大多数情况下.该卡是由在该装置的单独芯片仿真,称为安全元件. 无线运营商提供了非常 ...