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();
}

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

相关推荐
知识中的海王几秒前
Python html 库用法详解
开发语言·python
烛阴2 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
獨枭18 分钟前
配置 macOS 上的 Ruby 开发环境
开发语言·macos·ruby
飞由于度23 分钟前
C#中清空DataGridView的方法
开发语言·c#
朝朝又沐沐1 小时前
基于算法竞赛的c++编程(18)string类细节问题
开发语言·c++·算法
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
黄雪超1 小时前
JVM——对象模型:JVM对象的内部机制和存在方式是怎样的?
java·开发语言·jvm
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
爱学习的capoo2 小时前
matlab自控仿真【第一弹】❀传递函数和输出时域表达式
开发语言·matlab