marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）
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有效）的更多相关文章
- marquee实现跑马灯
<!DOCTYPE html><html> <head><title>跑马灯大全</title> </head> <bod ...
- Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- android 总结（样式）—跑马灯 button的点击效果 RadioGroup 实现滑动的效果 button 下面有阴影 卡片样式
<Button android:layout_width="wrap_content" android:layout_height="wrap_content&qu ...
- js+css简单效果（幕布，跑马灯）
2.js普通的盒子,css的优先级 css的优先级 !important >>>>> style 行内样式 >>>>> #id选择器 # ...
- 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题
说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...
- HTML连载10-details标签&summary标签&marquee标签
1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: ...
- Android-TextView跑马灯效果
要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...
- Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]
有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...
- Textview在Listview中实现跑马灯效果
textview添加属性: android:singleLine="true" 表示单行显示 android:ellipsize="marquee" 设 ...
随机推荐
- [bug] VS2013 Brower Link和Aspnetpager引发的问题分析
概述 在ie11上浏览页面的时候,突然发现在使用Aspnetpager的页面会有一个bug. 开发环境:win8.1+vs2013+ie11. 项目描述:这个问题出现在内容页中,应用了母版页. 解决方 ...
- nmcli日常用法
一.nmcli日常用法nmcli dev status //查看系统现有网络设备的连接状态nmcli conn show //查看已有连接nmcli conn delete UUID1 UUID2 U ...
- Python数据整合与数据准备-BigGorilla应用
一.前言 要应用BigGorilla框架对应数据进行数据的处理与匹配,那么首先要下载Anaconda安装,下载地址:https://www.continuum.io/downloads Anacond ...
- [Android]一些设计细节
1. 图标 图标分为:Launcher 图标(程序图标),ActionBar 图标(菜单图标),Contextual 图标(嵌入的小图标)以及Notification 图标(通知栏图标).每种图标都有 ...
- gensim加载word2vec训练结果(bin文件)并进行相似度实验
# -*- coding: utf-8 -*- import gensim # 导入模型 model = gensim.models.KeyedVectors.load_word2vec_format ...
- ./test.sh . ./test.sh source ./test.sh的区别
背景 今天写几个shell脚本,使用一个公共的config.sh,但是export出来的东西在另外的*.sh中不能直接用,这让我很惆怅,印象中就是可以export出来给别的shell用啊,只要不是下一 ...
- TestNG+Maven+IDEA环境搭建
TestNG+Maven+IDEA环境搭建 前言: 主要进行TestNG测试环境的搭建 所需环境: 1.IDEA UItimate 2.JDK 3.Maven 一.创建工程 File –>new ...
- docker集群——搭建Mesos+Zookeeper+Marathon的Docker管理平台
服务器架构 机器信息: 这里部属的机器为3个Master控制节点,3个slave运行节点,其中: zookeeper.Mesos-master.marathon运行在Master端:Mesos-sla ...
- BZOJ 1016 JSOI 2008 最小生成树计数 Kruskal＋搜索
题目大意:给出一些边,求出一共能形成多少个最小生成树. 思路:最小生成树有非常多定理啊,我也不是非常明确.这里仅仅简单讲讲做法.关于定各种定理请看这里:http://blog.csdn.net/wyf ...
- 【MyBatis学习09】高级映射之一对多查询
上一篇博文总结了一下一对一的映射,本文主要总结一下一对多的映射,从上一篇文章中的映射关系图中可知,订单项和订单明细是一对多的关系,所以本文主要来查询订单表,然后关联订单明细表,这样就有一对多的问题出来 ...