JS实现文字的左右滚动

最新推荐文章于 2025-03-02 16:58:43 发布

二大哟

最新推荐文章于 2025-03-02 16:58:43 发布

阅读量1w

点赞数

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/u013173279/article/details/47132203

版权

本文介绍了如何使用JavaScript实现文字的左右滚动效果。通过获取文字的x轴位置，并结合内联样式或内嵌样式，调整文字滚动动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    p{position: absolute;left: 125px; top: 100px;}
</style>

<script>
    var tag = 0;//标志，判断对象当前位置是在最左还是最右，注意这里必须设置为全局变量，否则在执行setTimeOut方法会重置为0，使得无法再向右返回
    //移动文字
    function moveWord(){
        var resource = document.getElementById("word");
        var x = parseInt(window.getComputedStyle(resource,null).left);//获取当前文字所在x轴位置，并转换为int类型
        var tx = 500;//最右目标
        var rx = 125;//最左目标即起始位置
        if(x < tx && tag == 0)//向右滚动
        {
            x++;
            if(x == tx)//判断到达最右目标后，标志设置为1
                tag = 1;
        }
        if(x> rx && tag == 1)//向左滚动
        {
            x--;
            if(x == rx)//判断到达最左目标后&#x