div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

要实现类似marquee的无缝滚动效果，可以使用div、CSS和JavaScript结合的方式。具体实现步骤如下：

要实现类似marquee的无缝滚动效果，可以使用div、CSS和JavaScript结合的方式。具体实现步骤如下：

HTML结构

先创建一个包含滚动内容的div，再在div内部创建两个包裹滚动内容的div，其中一个用于显示内容，一个用于隐藏内容，两个div的宽度相等，高度与滚动内容相同。如下所示：

<div class="scroll-wrap">
  <div class="scroll-show">
    <!-- 显示的滚动内容 -->
  </div>
  <div class="scroll-hide">
    <!-- 隐藏的滚动内容 -->
  </div>
</div>

CSS样式

1. 将包裹滚动内容的div设置为相对定位，overflow属性设置为hidden，以隐藏超出内容。

2. 将scroll-show和scroll-hide两个div设置为绝对定位。其中，scroll-show的left值为0，scroll-hide的left值等于scroll-show的宽度。top和bottom属性都设置为0，使得两个div与包裹滚动内容的div高度一致。

3. 为scroll-show和scroll-hide两个div添加相同的样式，如下所示：

.scroll-show,
.scroll-hide {
  position: absolute;
  top: 0;
  bottom: 0;
  white-space: nowrap; /* 防止文字换行 */
}

同时，为两个div设置相同的宽度，使得滚动内容能够完全填充两个div。

1. 为scroll-wrap设置width属性，使得其能够容纳两个div的宽度之和。

JavaScript实现

JavaScript的实现方式有多种，以下以定时器的方式实现。具体步骤如下：

1. 获取scroll-show和scroll-hide两个div。

2. 设置一个全局变量offset，表示滚动的位移量，初始值为0。

3. 创建一个定时器，每个一定时间（如20ms）将offset值减少。同时，将scroll-show和scroll-hide根据offset值左移，实现滚动效果。

4. 当scroll-hide完全被滚动到显示区域中时，将scroll-show和scroll-hide交换位置，再将offset值重置为0，重新开始滚动。

以下是一段示例代码，实现了向左滚动的效果：

<div class="scroll-wrap">
  <div class="scroll-show">
    <span>第一条滚动内容</span>
    <span>第二条滚动内容</span>
    <span>第三条滚动内容</span>
  </div>
  <div class="scroll-hide">
    <span>第四条滚动内容</span>
    <span>第五条滚动内容</span>
    <span>第六条滚动内容</span>
  </div>
</div>

.scroll-wrap {
  width: 500px;
  position: relative;
  overflow: hidden;
}
.scroll-show,
.scroll-hide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  width: 100%;
}
.scroll-show {
  left: 0;
}
.scroll-hide {
  left: 100%;
}

var scrollShow = document.querySelector('.scroll-show');
var scrollHide = document.querySelector('.scroll-hide');
var offset = 0;

setInterval(function() {
  offset--;
  scrollShow.style.left = offset + 'px';
  scrollHide.style.left = (offset + scrollShow.offsetWidth) + 'px';
  if (offset <= -scrollShow.offsetWidth) {
    offset = 0;
    scrollShow.style.left = '0';
    scrollHide.style.left = '100%';
    var tmp = scrollShow;
    scrollShow = scrollHide;
    scrollHide = tmp;
  }
}, 20);

另外，为了兼容Firefox浏览器，需要为scroll-show和scroll-hide两个div添加一个display: inline-block样式，如下所示：

.scroll-show,
.scroll-hide {
  display: inline-block;
}

以上是实现“div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox”的完整攻略，另外还可以使用transform属性实现滚动效果，具体可以参考一些插件库的实现方式。