Skip to content

Latest commit

 

History

History
151 lines (136 loc) · 4.54 KB

实现文字滚动播放.md

File metadata and controls

151 lines (136 loc) · 4.54 KB
Raw

实现文字滚动播放

实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。

实现

CSS Animation

使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。此方法的主要问题在于left是100%是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度。

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animation</title>
    <style type="text/css">
        .container{
            border: 1px solid #eee;
            overflow: hidden;
            display: inline-block;
        }
        @keyframes text-scroll {
            0% {
                left: 100%;
            }
            25% {
                left: 50%;
            }
            50% {
                left: 0%;
            }
            75% {
                left: -50%;
            }
            100% {
                left: -100%;
            }
        }
        .text {
            position: relative;
            animation: text-scroll 5s linear infinite;
        } 

    </style>
</head>
<body>
    <div class="container">
        <div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
    <div>
</body>
</html>

使用CSS动画方法，使用transform: translateX()属性来控制文字元素距离左侧相对偏移的距离，此方法同样也存在上述的问题。

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animation</title>
    <style type="text/css">
        .container{
            border: 1px solid #eee;
            overflow: hidden;
            display: inline-block;
        }
        @keyframes text-scroll {
            0% {
                transform: translateX(100%);
            }
            50% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        .text {
            animation: text-scroll 5s linear infinite;
        } 

    </style>
</head>
<body>
    <div class="container">
        <div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
    <div>
</body>
</html>

JavaScript

使用Javascript我们能够实现无缝滚动，即需要复制一份一样的元素至原元素的后方，当第一个元素滚动完成后我们立即将位置复原。

<!DOCTYPE html>
<html>
<head>
    <title>Javascript</title>
    <style type="text/css">
        .container{
            display: flex;
            border: 1px solid #eee;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 150px;
        }
        .text{
            padding: 0 5px;
            white-space:nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">循环滚动播放滴滴答答滴滴答答滴滴答答</div>
    <div>
</body>
<script type="text/javascript">
    (function(win, doc){
        const container = doc.querySelector(".container"); // 容器元素
        const textNode = doc.querySelector(".container > .text"); // 文字元素
        container.appendChild(textNode.cloneNode(true)); // 复制元素到后方
        const textWidth = textNode.offsetWidth; // 获取文字元素宽度
        let count = container.offsetWidth; // 初始化向左偏移为容器大小
        const loop = () => {
            if(count <= -textWidth) { // 如果文字偏移超出一个文字元素的宽度则复原
                textNode.style["margin-left"] = 0; // 复原
                count = 0; // 复原
            }
            textNode.style["margin-left"] = `${count--}px`; // 继续向左移动
            window.requestAnimationFrame(() => loop()); // 动画递归调用
        }
        window.requestAnimationFrame(() => loop()); // 启动动画
        // requestAnimationFrame当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，setInterval需要使用加入visibilitychange监听来清除与重设定时器
    })(window, document);
</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/101107612