js文字无限循环向上滚动轮播

小一梦

于 2023-05-16 15:57:18 发布

阅读量1.2k

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43728978/article/details/130707566

版权

这段代码创建了一个CSS样式化的div，其中包含一个id为con1的列表，显示徐志摩的诗句。JavaScript部分用于实现列表内容在div内向上滚动的动画效果，当鼠标悬停时停止滚动，离开时恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

html

<div id="scrollBox">
    <ul id="con1">
        <li>假如我是一朵雪花，</li>
        <li>翩翩的在半空里潇洒，</li>
        <li>我一定认清我的方向</li>
        <li>飞扬，飞扬，飞扬</li>
        <li>这地面上有我的方向。</li>
        <li>不去那冷寞的幽谷，</li>
        <li>不去那凄清的山麓，</li>
        <li>也不上荒街去惆怅</li>
        <li>飞扬，飞扬，飞扬</li>
        <li>你看，我有我的方向！</li>
    </ul>
    <ul id="con2"></ul>
</div>

css

* {
	margin:0;
	padding:0;
}
ul,li {
	list-style:none;
	display:block;
}
#scrollBox {
	height:150px;
	width:300px;
	margin:100px auto;
	background:#ff0;
	overflow:hidden;
}
#scrollBox #con1,#con2 {
	width:280px;
	float:left;
}
#scrollBox li {
	height:15px;
	line-height:15px;
	text-align:center;
	margin-bottom:15px
}

js

var box = document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML = con1.innerHTML;

function scrollUp() {
    if (box.scrollTop >= con1.offsetHeight) {
        box.scrollTop = 0;
    } else {
        box.scrollTop++
    }
}
var time = 50;
var mytimer = setInterval(scrollUp, time);
box.onmouseover = function() {
    clearInterval(mytimer);
}
box.onmouseout = function() {
    mytimer = setInterval(scrollUp, time);
}