信息无缝滚动效果marquee

最新推荐文章于 2022-12-28 14:52:47 发布

转载最新推荐文章于 2022-12-28 14:52:47 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lqcdsns/p/5608997.html

本文介绍了一种使用HTML、CSS及JavaScript实现的上下信息无缝滚动效果。通过克隆内容并利用定时器更新滚动位置来达到无缝滚动的目的。文章提供了完整的代码示例。

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

横向滚动、纵向滚动

1. 解决滚动的空白

向左向右滚动的话，可以根据父级定位left，每次加或者减可以使物体向左或右运动，用top也可以实现向上或向下运动

上下滚动实现无缝滚动
1. innerHTML
2. scrollTop
3. offsetHeight
4. setInterval()
5. clearInterval()

HTML:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>信息无缝滚动效果</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div id="box">
    <ul id="cont1">
        <li><a href="#">111111111111</a></li>
        <li><a href="#">222222222222</a></li>
        <li><a href="#">333333333333</a></li>
        <li><a href="#">444444444444</a></li>
        <li><a href="#">555555555555</a></li>
        <li><a href="#">666666666666</a></li>
        <li><a href="#">777777777777</a></li>
        <li><a href="#">888888888888</a></li>
        <li><a href="#">999999999999</a></li>
    </ul>
    <ul id="cont2"></ul>
</div>

<script src="script.js"></script>

</body>
</html>

CSS：

* {
    padding: 0;
    margin: 0;
}

body {
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

ul {
    list-style: none;
}

a img {
    border: none;
}

a {
    color: #333333;
    text-decoration: none;
}

a:hover {
    color: #ff0000;
}

#box {
    width: 335px;
    height: 144px;
    margin: 50px auto 0 auto;
    overflow: hidden; /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}

/*#cont1 {
    background: lightcoral;
}

#cont2 {
    background: lightblue;
}*/

JS：

var area = document.getElementById('box');
var cont1 = document.getElementById('cont1');
var cont2 = document.getElementById('cont2');

area.scrollTop = 0;
// 克隆cont1给cont2
cont2.innerHTML = cont1.innerHTML;

function myScroll() {
    if(area.scrollTop >= cont1.scrollHeight) {
        area.scrollTop = 0;
    }else {
        area.scrollTop++;
    }
}

var time = 50;
var interval = setInterval('myScroll()', time);

area.onmouseover = function () {
    clearInterval(interval);
};

area.onmouseout = function () {
    // 继续执行之前的定时器
    interval = setInterval('myScroll()', time);
};