文字向上无限滚动

zss_web

于 2021-11-22 16:03:13 发布

阅读量681

点赞数

文章标签： js vue.js javascript

本文链接：https://blog.csdn.net/zss_web/article/details/121473745

版权

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>文字从下到上无缝轮播</title>
    <style>
        #rollCon {
            width: 360px;
            text-align: center;
            display: block;
            overflow: hidden;
            color: black;
            height: 100px;
            position: absolute;
            left: 10%;
            background-color: #eee;
        }
        
        #rollSubject {
            height: auto;
        }
        
        #rollCopy {
            height: auto;
        }
        #cur{
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
    </style>
</head>

<body style="height: 100%;width: 100%;">
    <div id="cur"></div>
    <div id="rollCon">
        <div id="rollSubject">
            <p>
                骑着单车的我俩如孩儿能伏于爸爸的肩膊如孩儿能伏于爸爸的肩膊如孩儿能伏于爸爸的肩膊如孩儿能伏于爸爸的肩膊 0
            </p>

        </div>
        <div id="rollCopy"></div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var rollCon = document.getElementById('rollCon');
        var rollSubject = document.getElementById('rollSubject');
        var rollCopy = document.getElementById('rollCopy');
        rollCopy.innerHTML = rollSubject.innerHTML;
        if (($('#rollSubject').height() > 0) && ($('#rollSubject').height() < $('#rollCon').height())) {
            $('#rollCon').css('height', $('#rollSubject').height());
            setInterval(Marquee, 50);
        } else if (($('#rollSubject').height() > 0) && ($('#rollSubject').height() >= $('#rollCon').height())) {
            setInterval(Marquee, 50);
        }

        function Marquee() {
            if ((rollCopy.offsetTop - rollSubject.offsetTop) < rollCon.scrollTop)
                rollCon.scrollTop = 0;
            else {
                rollCon.scrollTop++;
            }
        }
        

    </script>
</body>

zss_web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文字向上无限滚动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>文字从下到上无缝轮播</title> <style> #rollCon { width: 360px; text-align: center; display: block;
复制链接

扫一扫