简单的公告无限滚动

之前做项目时遇到一个需要无限滚动的公告

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
简单的代码思路 换可以使用其他的方式进行更改