js文字无限循环向上滚动

html代码

<div id="scroll">
	<div id="con1">
		<p style="color: red;">文字1111111</p>
		<p>文字22222</p>
		<p>文字33333</p>
		<p>文字44444</p>
		<p>文字55555</p>
		<p>文字66666</p>
		<p>文字77777</p>
		<p>文字88888</p>
		<p>文字99999</p>
		<p>文字101010</p>
	</div>
	<div id="con2"></div>
</div>
<style>
#scroll{
	width: 300px;
	height: 210px; /*这个高度要保证小于等于con1的高度*/
	overflow: hidden;
}
</style>

js代码

<script>
        var time = 60; // 滚动间隙
        var box = document.getElementById('scroll'); // 获取父元素
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML = con1.innerHTML;
        function Up() {
            if (box.scrollTop >= con1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop+=1;
            }

        }
        var setlId = setInterval(Up, time);
        //鼠标移上父元素时清除定时器
        box.onmouseover = function() {
                clearInterval(setlId);
            }
            //鼠标离开父元素时触发事件
        box.onmouseout = function() {
            setlId = setInterval(Up, time);
        }
</script>

image

posted @ 2022-11-25 21:36  天宁哦  阅读(406)  评论(0编辑  收藏  举报