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. Linux 动态库 静态库

    什么是库 本质上来说库是一种可执行代码的二进制形式,可以被操作系统载入内存执行.由于windows和Linux的本质不同,因此二者库的二进制是不兼容的.Linux操作系统支持的库函数分为静态库和动态库 ...

  2. centos和ubuntu下pycharm无法输入中文的解决办法

    编辑启动的脚本文件 vim /usr/bin/pycharm ubuntu下添加 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export ...

  3. scrapy-splash抓取动态数据例子十五

    一.介绍 本例子用scrapy-splash爬取电视之家(http://www.tvhome.com/news/)网站的资讯信息,输入给定关键字抓取微信资讯信息. 给定关键字:数字:融合:电视 抓取信 ...

  4. Quartz定时框架入门

    Quartz框架是Java开源的定时任务调度器,Quartz框架中有如下核心概念: 1. Job 任务接口,接口中只声明方法void execute(JobExecutionContext conte ...

  5. Mybatis学习记录（二）----mybatis开发dao的方法

    1  SqlSession使用范围 1.1 SqlSessionFactoryBuilder 通过SqlSessionFactoryBuilder创建会话工厂SqlSessionFactory 将Sq ...

  6. B4:策略模式 Strategy

    它定义了算法家族,分别封装起来,让他们之间可互相替换,此模式让算法的变化,不会影响到使用算法的客户. UML 示例代码: abstract class Strategy { protected $mo ...

  7. Python基础--人们一些最爱的标准库(random time)

    Python继续! random 包括返回随机数的函数. 这里跟C++一样,产生的是伪随机数,并非全然随机数. random中一些重要的函数: random() 返回0<n<=1的随机数n ...

  8. SQL优化- 数据库SQL优化——使用EXIST代替IN

    数据库SQL优化——使用EXIST代替IN 1,查询进行优化,应尽量避免全表扫描 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引 . 尝试下面的 ...

  9. 压测过程中，CPU和内存占用率很高，案例简单分析

    Q:  最近公司测试一个接口,数据库采用Mongo    并发策略:并发400个用户,每3秒加载5个用户,持续运行30分钟    数据量:8000条左右 压测结果发现:    TPS始终在5左右   ...

  10. java之生成jar包

    Java编写的application程序是否能够最终形成一个类似于exe一样的可执行文件,难道就只能用命令行运行?------------------------------------------- ...