JavaScript走马灯实现

HTML

html 复制代码
    <div class="marquee">
        <img src="./img/laba.png" alt="" />
        <div class="marquee-container">
            <div class="marquee-content"></div>
        </div>
    </div>

CSS

css 复制代码
.print {
    width: 100%;
    height: 400px;
    background-image: url('../img/xiehui.png');
    background-size: 100% 100%;
}

.marquee {
    width: 96%;
    height: 60px;
    margin-left: 2%;
    background-color: #fcfdfe;
    margin-top: -30px;
    border-radius: 10px;
}

.marquee img {
    width: 10%;
    margin-top: 10px;
    float: left;
}

.marquee-container {
    width: 87%;
    height: 30px;
    line-height: 30px;
    float: left;
    margin-top: 15px;
    margin-left: 2%;
    overflow: hidden;
    position: relative;
    text-wrap: nowrap;
    box-sizing: border-box;
}

.marquee-content {

    display: inline-block;
    position: absolute;
    text-wrap: nowrap;
}

JS

javascript 复制代码
function marquee(data) {
    console.log(data.data.announ[0].content);
    $('.marquee-content').html(data.data.announ[0].content);
    const container = document.querySelector('.marquee-container');
    const content = document.querySelector('.marquee-content');
    const containerWidth = container.offsetWidth;
    console.log(containerWidth);
    const contentWidth = content.scrollWidth;
    let startPosition = containerWidth;
    content.style.left = `${startPosition}px`;

    function animateMarquee() {
        startPosition--;
        if (startPosition < -contentWidth) {
            startPosition = containerWidth;
        }
        content.style.left = `${startPosition}px`;
        requestAnimationFrame(animateMarquee);
    }

    animateMarquee();
}

时间慢点 看的更清晰哈哈哈!

相关推荐
j_xxx404_12 分钟前
C++ STL简介:从原理到入门使用指南
开发语言·c++
用户66006766853926 分钟前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
十年_H27 分钟前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
UIUV35 分钟前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
懒惰蜗牛1 小时前
Day44 | J.U.C中的LockSupport详解
java·开发语言·后端·java-ee
闲人编程1 小时前
Python设计模式实战:用Pythonic的方式实现单例、工厂模式
开发语言·python·单例模式·设计模式·工厂模式·codecapsule·pythonic
Moniane1 小时前
API技术深度解析:从基础原理到最佳实践
开发语言
扶苏-su2 小时前
Java---String类
java·开发语言·string类
阿珊和她的猫2 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
nexttake2 小时前
5.go-zero集成gorm 和 go-redis
开发语言·后端·golang