JS JavaScript 实现文字上下滚动效果
这篇文章主要为大家介绍了js实现文字滚动效果,类似于中奖记录信息滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播 滚动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
#scroll {
margin: 0;
padding: 2px 0;
list-style: none;
width: 300px;
height: 200px;
overflow: hidden;
border: 1px #e5e5e5 solid;
font-size: 16px;
color: #f0f0f0;
background-image: url("../images/p.png");
}
#scroll li {
margin: 0;
padding: 0 4px;
font-size: 12px;
height: 18px;
line-height: 18px;
width: 600px;
}
</style>
<script>
window.onload = function () {
function dMarquee(id) {
let speed = 20; //速度
let stop = 1000; //停止时间
let ul = document.getElementById(id);//获取ul元素
let rows = ul.getElementsByTagName('li').length;//获取li个数
let height = ul.getElementsByTagName('li')[0].offsetHeight;//取得第一个li的高度
ul.innerHTML += ul.innerHTML;//获取所有li
let timeID = false;//setTime的时间标示
let play = function () { //移动方法
ul.scrollTop++;//移动滚动条
//移动到底的时候恢复为零
if (ul.scrollTop === rows * height) {
ul.scrollTop = 0;
}
//每次滚动
if (ul.scrollTop % height === 0) {
timeID = setTimeout(play, stop);
} else {
timeID = setTimeout(play, speed);
}
}
timeID = setTimeout(play, stop);
ul.onmouseover = function () {
clearTimeout(timeID);
}
ul.onmouseout = play;
}
dMarquee('scroll')
}
</script>
</head>
<body>
<ul id="scroll">
<li>Lorem ipsum dolor sit amet.</li>
<li>Amet hic ipsum offices vitae!</li>
<li>Debits quart qua sapient venial.</li>
<li>Ilium nobs object oddity sapient?</li>
<li>Et laudanum nemo official omnibus.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Dolore hic magnam nemo quasi.</li>
<li>Expedita nemo non optio performed?</li>
<li>Asperities culpa impedit in quos.</li>
<li>Cumque illum performed similique volutes.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Eveniet optio, vitae. Fuga, illum.</li>
<li>Diagnosis fugiat laborum officiis quibusdam?</li>
<li>Cumque neque qua tempora volutes?</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consecrated incidunt quo rem voluptatem.</li>
<li>Culpa distinctio natus pariatur velit.</li>
<li>Dolores neque similique sint ut!</li>
<li>Accuses esse itaque nihil rescinds.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Fugit iure nesciunt placeat poor.</li>
<li>Aperiam atque cupidity numquam rescinds!</li>
<li>Illum molest officia sed veniam!</li>
<li>Enum fugiat in labore optio?</li>
</ul>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)