在做中奖列表的时候, 需要做一个名单上下滚动的效果, 纯css 效果就可以实现
<div class="marquee">
<div class="row">
<span class="col">20190710</span>
<span class="col">北京市昌平区建材城西路金燕龙写字</span>
<span class="col">1000010</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190710</span>
<span class="col">北京市昌平区建材城西路金燕龙写字</span>
<span class="col">1000010</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190710</span>
<span class="col">北京市昌平区建材城西路金燕龙写字</span>
<span class="col">1000010</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190710</span>
<span class="col">北京市昌平区建材城西路金燕龙写字</span>
<span class="col">1000010</span>
<span class="icon-dot"></span>
</div>
</div>
css hovr 的时候就停止滚动
.marquee {
animation: row 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
这样的可以实现滚动了, 是不是很简单
但是这样也有个问题, 就是滚到一半的时候 突然就闪现从头开始, 这个时候最好js 拷贝一份再插入到后面
//滚动
//原理:把marquee下面的子盒子都复制一遍 加入到marquee中
// 然后动画向上滚动,滚动到一半重新开始滚动
//因为选取的是两个marquee 所以要遍历
$('.marquee').each(function (index, dom) {
//将每个 的所有子级都复制一遍
var rows = $(dom).children().clone();
//再将新的到的加入原来的
$(dom).append(rows);
});
这样就就好了, 比用js实现好多了