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. 【mybatis】service层中一个方法中使用mybatis进行数据库的 多个修改操作，可能是update也可能是delete操作，但是sql语句命名执行并且在控制台打印出来了，但是数据库中未更新到数据【事务的问题】

    问题描述: service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据 ...

  2. 一良心操盘手：我们是这样玩死散户的！ z

    做庄必须考虑很多问题: 第一是证监会的监控.操控股票不能让他们抓住把柄,这时候就要考虑多户头,或者拉几个私募大户集体作战. 第二要考虑产业资本的问题.如果我们拉的时候,他们看到利润可观,结果大量抛出筹 ...

  3. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...

  4. Swift，枚举

    枚举类型判断 1.设置并利用枚举 enum Weacher{ case a case b case c } var d=Weacher.b switch d{ case .a: print(" ...

  5. 织梦默认分页样式改动 解决分页列表显示，去掉li

    近期装了个织梦dedecmsV5.7版本号时,调用分页显示出现的结果出现好几行,怎么也不能在一排显示,找了非常多资料,才了解到是由织梦模板中分页加了<Li>列表标签,解决有两种方法,以下将 ...

  6. iOS: Xcode7安装KSImageNamed插件，自动读取图片名称

    官方文档: ## How do I use it?     Build the KSImageNamed target in the Xcode project and the plug-in wil ...

  7. 【译】你对position的了解有多少？

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  8. 香蕉派 Banana pi BPI-M1+ 双核开源单板计算机. 板载WIFI

     Banana PI BPI-M1+是一款高性能双核开源硬件单板计算机,Banana PI BPI-M1+是一款比树莓派更强悍的双核Android4.4与Linux产品. Banana PI BP ...

  9. ViewPager中Fragment无法显示的问题

    问题描述: Actvitiy->Fragment1 ->Fragment2 Fragment1中有1个ViewPager,ViewPager里面有包括了2个Fragment. 当第一次执行 ...

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

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