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 @   天宁哦  阅读(426)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示