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. Coherence代理节点在离开集群时的恢复

    Coherence的架构参考 在极端压力之下,有时候代理节点会忙于处理请求而不响应其他的心跳,同步,导致其他节点传输的报文没有回应,而被认为是离开集群,从而影响业务. 写了一段代码,能让进程在监听到有 ...

  2. WebLogic Cluster Sevlet的配置

    虽然生产环境中不建议使用,但因为客户需要考试可能用到,所以又做了一遍 1. 配置受管Server,ProxyServer,过程略 2.构建Proxy Application 建立一个ProxyApp的 ...

  3. GyoiThon:基于机器学习的渗透测试工具

    简介 GyoiThon是一款基于机器学习的渗透测试工具. GyoiThon根据学习数据识别安装在Web服务器上的软件(操作系统,中间件,框架,CMS等).之后,GyoiThon为已识别的软件执行有效的 ...

  4. Centos6.5搭建RHCS集群-实现GFS+iSCSI网络共享存储

    RHCS集群配置 需要用到的各组件功能:RHCS(Red Hat Cluster Suite):能够提供高可用性.高可靠性.负载均衡.存储共享且经济廉价的集群工具集合.LUCI:是一个基于web的集群 ...

  5. 一起來玩鳥 Starling Framework(7)MovieClip

    承上一篇,我們接著來講最後一個IAnimatable類別,MovieClip.Starling的MovieClip跟native的MovieClip不太一樣,它只能接收一個Vector.<Tex ...

  6. TestNG+Maven+IDEA环境搭建

    TestNG+Maven+IDEA环境搭建 前言: 主要进行TestNG测试环境的搭建 所需环境: 1.IDEA UItimate 2.JDK 3.Maven 一.创建工程 File –>new ...

  7. 【微信转载】Google是如何做测试的

    就 目前的软件公司而言,Google无疑是在开放和创新力方面做得最好的.而如何支撑Google这种快速地扩张的研发能力以及迭代速度,并且产品质量总是 一如以往的能给人们很棒的用户体验?这是一个值得我们 ...

  8. Maven 命令行创建项目时 Could not find goal ‘create’ in plugin org.apache.maven.plugins:...

    使用maven3.3.9 版本,进行命令行创建项目时输入以下命令创建失败 mvn archetype:create -DgroupId=com.zang.maven  -DartifactId=sys ...

  9. EF实体查询出的数据List<T>转DataTable出现【DataSet 不支持 System.Nullable<>】的问题

    public static DataTable ToDataTable<T>(this IEnumerable<T> varlist, CreateRowDelegate< ...

  10. 通过xsd schema结构来验证xml是否合法

    import sys import StringIO import lxml from lxml import etree from StringIO import StringIO # Constr ...