之前做项目时遇到一个需要无限滚动的公告
html代码
<div>
<span>这里是公告1</span>
<span>这里是公告2</span>
<span>这里是公告3</span>
<span>这里是公告4</span>
<span>这里是公告5</span>
<span>这里是公告6</span>
<span class="last">这里是公告7</span>
</div>
css代码
div{
width: 100%;
height: 100px;
overflow: hidden;
}
span{
display: block;
width: 100%;
text-align: center;
}
父元素一定要写hidden,否则就会显示如下:多出一行;
js代码
<script type="text/javascript">
window.onload = function(){
num = 2;
setInterval(function(){
num +=2;
$("span").css("transform","translateY("+-num+"px)")
var a = $(".last").offset()
if (a.top-400<=0){
console.log("快到底了");
$("div").append('<span>这里是公告6</span>')
}
},100)
}
</script>
我引入的有jq
简单的代码思路 换可以使用其他的方式进行更改