案例——跑马灯

最新推荐文章于 2024-03-25 10:15:32 发布

、小会

最新推荐文章于 2024-03-25 10:15:32 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/gmh1118/article/details/113773222

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

跑马灯

效果图
在这里插入图片描述

代码
html+css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>跑马灯</title>
    <link rel="stylesheet" href="css/baseCss.css">
    <style>
        .marqueeBox {
            position: relative;
            margin: 20px auto;
            width: 500px;
            height: 100px;
            border: 1px solid blue;
            overflow: hidden;
        }
        
        .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 98px;
        }
        
        .wrapper li {
            float: left;
            width: 100px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }
        
        .wrapper li:nth-child(3n) {
            background: lightblue;
        }
        
        .wrapper li:nth-child(3n+1) {
            background: lightgreen;
        }
        
        .wrapper li:nth-child(3n+2) {
            background: lightpink;
        }
    </style>
</head>

<body>
    <div class="marqueeBox">
        <ul class="wrapper">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <script src="js/utils.js"></script>
    <script src="js/index1.js"></script>
</body>

</html>

let wrapper = document.querySelector('.wrapper');
/**
 * 实现JS动画
 *  让wapper每隔一段时间（最优动画时间间隔13-17毫秒）在原有的基础上减去步长（快一点，步长就大一点）
 */
//1. 将wrapper中原有的LI整体克隆一份放到容器的末尾（为了实现无缝滚动）
wrapper.innerHTML += wrapper.innerHTML;
utils.setCss(wrapper, 'width', utils.setCss(wrapper, 'width') * 2);
//设置动画
setInterval(() => {
    //1. 获取wrapper的left的值,减去步长,把最新的步长赋值给元素
    let curl = utils.setCss(wrapper, 'left');
    curl -= 2;
    utils.setCss(wrapper, 'left', curl);
    //2. 实现无缝：
    //当ul盒子左偏移整个ul盒子的一半，则让wrapper立即运动到left为零的位置
    if (Math.abs(wrapper.offsetLeft) >= utils.setCss(wrapper, 'width') / 2) {
        utils.setCss(wrapper, 'left', 0);
    }
}, 13);