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. Oracle RAC 环境下的 v$log v$logfile

    通常情况下,在Oracle RAC 环境中,v$视图可查询到你所连接实例的相关信息,而gv$视图则包含所有实例的信息.然而在RAC环境中,当我们查询v$log视图时说按照常理的话,v$log视图应当看 ...

  2. Shell中 调用/引用/包含 另外的脚本文件的两种方法

    脚本 first (测试示例1) #!/bin/bash echo 'your are in first file' 问)在当前脚本文件中调用另外一个脚本文件? 方法一: 使用 source 脚本 s ...

  3. mac下更新自带的PHP版本到5.6或7.0

    下载和安装PHP 5.6 打开终端并且运行如下命令: curl -s http://php-osx.liip.ch/install.sh | bash -s 5.6 然后,PHP 5.6的版本会被安装 ...

  4. Android--使用XMLPull解析xml

    在Android中极力推荐的xmlpull方式解析xml.xmlpull不只能够使用在Android上.相同也适用于javase,但在javase环境下.你须要自己去获取xmlpull所依赖的类库. ...

  5. Arduino+GPRS 的环境监控方案

    设备前台界面:http://www.lewei50.com/home/gatewaystatus/361#576 本实采用的硬件,除了一个串口模块以外(约200元),其他均可以从taobo上面找到标准 ...

  6. javascript快速入门3--分支判断与循环

    分支结构 单一选择结构(if) 二路选择结构(if/else) 内联三元运算符 ?: 多路选择结构(switch) var condition = true; if (condition) { ale ...

  7. 报错：numRecords must not be negative

    报错的原因:删除已经使用过的kafka topic,然后新建同名topic 解决方法:把topic名字换一下 (有其他更好的解决方法,可以不修改topic名)

  8. php中将SimpleXMLElement Object数组转化为普通数组

    做微信开发,鉴于微信POST的消息是XML数据包,通过SimpleXMLElement Object获取的数据不好操作,需要转化为普通数组. 网上找了很多方法都不理想,发现通过json_decode和 ...

  9. (转）spring boot实战(第六篇)加载application资源文件源码分析

    原文:http://blog.csdn.net/liaokailin/article/details/48878447

  10. PostgreSQL数据库的安装与配置

    项目中要用PostgreSQL,所以专门学习了一下如何安装和调试postgresql,此博文用来记录自己的安装和调试过程,安装环境是centos7. 首先尝试了yum安装,因为毕竟yum安装简单粗暴, ...