• 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 {
    	 360px;
    	height: 200px;
    	margin: 0 auto;
    	background: #CF9;
    }
    marquee {
    	position: relative;
    	 360px;
    	height: 100px;
    	overflow:hidden;
    }
    #marquee1 {
    	background: #CCC;
    }
    #marquee2 {
    	background: #999;
    }
    a {
    	display: block;
    	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>
    

      

  • 相关阅读:
    IE6/IE7浏览器中"float: right"自动换行的解决方法
    IE6/IE7浏览器不支持display: inline-block;的解决方法
    如何解决两个li之间的缝隙
    input、button、a标签 等定义的按钮尺寸的兼容性问题
    在一个页面重复使用一个js函数的方法
    关于让input=text,checkbox居中的解决方法
    遮盖层实现(jQuery+css+html)
    button,input type=button按钮在IE和w3c,firefox浏览器区别
    前端-选项卡(菜单栏)
    形成人、机器、过程和数据的互联互通
  • 原文地址:https://www.cnblogs.com/zhengtulym/p/4522627.html
Copyright © 2020-2023  润新知