跑马灯案例（29）

最新推荐文章于 2023-06-23 23:02:36 发布

向上的二狗

最新推荐文章于 2023-06-23 23:02:36 发布

阅读量156

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_45738592/article/details/120487194

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在LONG LONG AGO以前，实现跑马灯用的是MARQUEE

    1.不好实现无缝衔接

    2.开始显示内容的时候后有空白

    3.性能消耗大

    4.目前MARQUEE标签基本上被舍弃了

    ...

  现如今跑马灯都是基于JS动画或者CSS3动画实现的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>珠峰培训</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .marqueeBox {
            position: relative;
            margin: 20px auto;
            width: 500px;
            height: 100px;
            border: 1px solid green;
            overflow: hidden;
        }

        .wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 900px;
            height: 100px;
        }

        .wrapper li {
            float: left;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }

        .wrapper li:nth-child(3n+1) {
            background: lightblue;
        }

        .wrapper li:nth-child(3n+2) {
            background: lightcyan;
        }

        .wrapper li:nth-child(3n+3) {
            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>
        <li>9</li>
    </ul>
</div>

<script src="js/utils.js"></script>
<script src="js/跑马灯.js"></script>
</body>
</html>

/*
 * 实现JS动画
 *   让WRAPPER每间隔一段时间（最优动画时间是13~17MS）在原有的LEFT值基础上减去步长（想让动画快一些，步长就大一点）
 */

let wrapper = document.querySelector('.wrapper');
//1.把WRAPPER中原有的LI整体克隆一份放到容器的末尾（无缝滚动）
/*let wrapperList = wrapper.querySelectorAll('li');
let frg = document.createDocumentFragment();
[].forEach.call(wrapperList, item => {
    frg.appendChild(item.cloneNode(true));
});
wrapper.appendChild(frg);
frg = null;*/
wrapper.innerHTML += wrapper.innerHTML;
utils.css(wrapper, 'width', utils.css(wrapper, 'width') * 2);//=>克隆完成后别忘记修改一下WRAPPER的宽度(内容变多了)

//2.基于定时器实现动画
setInterval(() => {
    //=>获取当前WRAPPER的LEFT值，减去步长，把最新的LEFT赋值给元素即可
    let curL = utils.css(wrapper, 'left');
    curL -= 2;
    utils.css(wrapper, {
        left: curL
    });

    //=>实现无缝:当我们UL距离MARQUEE-BOX的左偏移已经是整个WRAPPER的一半宽度(第一组原始内容已经运动完成了，现在看到的是克隆后的)，此时我们让WRAPPER立即运动到LEFT为零的位置即可
    if (Math.abs(wrapper.offsetLeft) >= utils.css(wrapper, 'width') / 2) {
        utils.css(wrapper, 'left', 0);//=>立即回到起始的位置
    }
}, 17);

向上的二狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跑马灯案例（29）

在LONGLONGAGO以前，实现跑马灯用的是MARQUEE1.不好实现无缝衔接2.开始显示内容的时候后有空白3.性能消耗大4.目前MARQUEE标签基本上被舍弃了...现如今跑马灯都是基于JS动画或者CSS3动画实现的<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>珠峰培训...
复制链接

扫一扫