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. 怎样在 Mac 上打开 ~_Library 文件夹

    怎样在 Mac 上打开 ~_Library 文件夹 听语音 浏览:17674 | 更新:2015-05-20 10:51 | 标签:文件夹 Mac 上的~/Library 文件夹是默认为隐藏的.因为苹 ...

  2. css自动换行与不换行

    1.自动换行 div{ word-wrap: break-word; word-break: normal; } 2.不换行 div{ white-space:nowrap; } 3.浮动效果不换行 ...

  3. wireshark----教你怎样抓包

    wireshark----教你怎样抓包 wireshark是一款强大的抓包工具,走过路过一定不要错过就是了,当你学习TCP/IP协议的时候,学习使用wireshark抓包正是理论联系实际最好的方法,先 ...

  4. 怎么成为PHP专家

    当阅读各种和PHP相关的博客.Quora问题.Google+社区.资讯和杂 志的时候,经常会注意到在技术上出现两极分化的现象.问题均围绕在“我如何连接到一个MySQL数据库?”,或者是“我如何使得邮件 ...

  5. iOS-国家代码选择功能github开源分享

    三行代码集成国家区号选择功能 功能执行效果如图: 开源链接: https://github.com/qxuewei/XWCountryCode 用法: 1.导入XWCountryCode类 2.在须要 ...

  6. FastGUI for NGUI教程

    原地址:http://blog.csdn.net/asd237241291/article/details/8499430 FastGUI是NGUI的一个扩展,所以必须要有NGUI才能使用.FastG ...

  7. lombok使用总结

    前提 这篇文章主要介绍lombok的使用,至于lombok的源码和原理暂不探究,可以看上一篇文章插件化注解处理API去了解lombok的基本原理.参考资料: lombok官网 lombok官方教程-l ...

  8. paypal - 支付所遇到的问题，编码等等

    1.ipn支付方式编码问题,paypal默认编码为 gb2312,需要登录paypal后台,进入用户信息设置>销售工具>更多销售工具>paypal按钮编码设置>更多选项,全部修 ...

  9. Redis 配置文件及命令详解

    ==基本配置 daemonize no 是否以后台进程启动 databases 16 创建database的数量(默认选中的是database 0) save 900 1 #刷新快照到硬盘中,必须满足 ...

  10. cygwin开发环境搭建与apt-cyg的应用

    1.Cygwin安装 http://www.cygwin.com/下载安装工具 详细安装过程參照http://jingyan.baidu.com/article/6b97984d83dfe51ca2b ...