请问如何用原生js实现文字向左横向滚动

qingwadaxia_1 2017-10-29 10:30:14

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<style type="text/css">
#gundong{width:320px;margin:0 auto;background:#dd127b;height:28px;line-height:28px;overflow:hidden;font-size:14px;color:#fff;font-weight:bold;}
</style>
<div id="gundong">asdddfsddsfdfsddd2523ddsfdddddr2ddetetdddgdfs8o980dd12dsaczvbety</div>

<script>
var gundong = document.getElementById("gundong");

</script>

</body>
</html>
请问如何用原生js实现文字向左横向滚动

...全文

1339 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2017-10-30

打赏
举报

你自己减少内容想一下就知道了，一次显示2个字符，有5个（12345）要滚动，你滚动到显示45的时候忽然重置为0，内容就会忽然变为12了，会跳你增加一倍，滚动到完一次内容（此时显示的还是12），设置scrollLeft为0，显示的还是12，内容一样就不会跳了

qingwadaxia_1 2017-10-30

打赏
举报

我想问下为什么要重复一遍文字呢为什么重复了就可以不间断呢

qingwadaxia_1 2017-10-30

打赏
举报

引用 5 楼 showbo 的回复:

[quote=引用 4 楼 qingwadaxia_1 的回复:] [quote=引用 3 楼 showbo 的回复:] 往左不就是 if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step; else if (step <0 && gundong.scrollLeft <=0) step = -step; 这里改成 if (step > 0 && gundong.scrollLeft >= scrollWidth) clearInterval(timer)就行行了，要重复往左就改为 if (step > 0 && gundong.scrollLeft >= scrollWidth) gundong.scrollLeft=0

大神我知道这样可以，但是会有个断开的情况，不能那种无间断的一直往左[/quote]内容doubule一次参考：javascript文字无缝滚动示例 [/quote]大神网站是你的吗我保存了

斯洛文尼亚旅游 2017-10-30

打赏
举报

引用 4 楼 qingwadaxia_1 的回复:

[quote=引用 3 楼 showbo 的回复:] 往左不就是 if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step; else if (step <0 && gundong.scrollLeft <=0) step = -step; 这里改成 if (step > 0 && gundong.scrollLeft >= scrollWidth) clearInterval(timer)就行行了，要重复往左就改为 if (step > 0 && gundong.scrollLeft >= scrollWidth) gundong.scrollLeft=0

大神我知道这样可以，但是会有个断开的情况，不能那种无间断的一直往左[/quote]内容doubule一次参考：javascript文字无缝滚动示例

qingwadaxia_1 2017-10-30

打赏
举报

引用 3 楼 showbo 的回复:

往左不就是 if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step; else if (step <0 && gundong.scrollLeft <=0) step = -step; 这里改成 if (step > 0 && gundong.scrollLeft >= scrollWidth) clearInterval(timer)就行行了，要重复往左就改为 if (step > 0 && gundong.scrollLeft >= scrollWidth) gundong.scrollLeft=0

大神我知道这样可以，但是会有个断开的情况，不能那种无间断的一直往左

qingwadaxia_1 2017-10-30

打赏
举报

引用 11 楼 showbo 的回复:

空格换行了，不在一行，要加上white-space:nowrap禁止换行

大神多谢了！我还有最后一个问题不好意思我问有点多为什么空格换行了他就不会滚动了滚的不是div里的内容吗这跟它换不换行有什么关系吗而且我只是加了个空格，为什么他会换行。

斯洛文尼亚旅游 2017-10-30

打赏
举报

空格换行了，不在一行，要加上white-space:nowrap禁止换行

qingwadaxia_1 2017-10-30

打赏
举报

引用 8 楼 showbo 的回复:

你自己减少内容想一下就知道了，一次显示2个字符，有5个（12345）要滚动，你滚动到显示45的时候忽然重置为0，内容就会忽然变为12了，会跳你增加一倍，滚动到完一次内容（此时显示的还是12），设置scrollLeft为0，显示的还是12，内容一样就不会跳了

不过还有个问题就是为什么不能用空格之类的符号隔开，用了就会只滚动一次

qingwadaxia_1 2017-10-30

打赏
举报

引用 8 楼 showbo 的回复:

你自己减少内容想一下就知道了，一次显示2个字符，有5个（12345）要滚动，你滚动到显示45的时候忽然重置为0，内容就会忽然变为12了，会跳你增加一倍，滚动到完一次内容（此时显示的还是12），设置scrollLeft为0，显示的还是12，内容一样就不会跳了

多谢

斯洛文尼亚旅游 2017-10-29

打赏
举报


    <style type="text/css">
        #gundong {
            width: 320px;
            margin: 0 auto;
            background: #dd127b;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
        }
    </style>
    <div id="gundong">asdddfsddsfdfsddd2523ddsfdddddr2ddetetdddgdfs8o980dd12dsaczvbety</div>

    <script>
        var gundong = document.getElementById("gundong");
        var step =1,scrollWidth=gundong.scrollWidth-gundong.offsetWidth;
        var timer=setInterval(function () {
            gundong.scrollLeft += step;
            if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step;
            else if (step <0 && gundong.scrollLeft <=0) step = -step;
        }, 50)
    </script>

Web开发学习资料推荐
javascript生成二维码
XDomainRequest，IE8+跨域请求对象

斯洛文尼亚旅游 2017-10-29

打赏
举报

往左不就是 if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step; else if (step <0 && gundong.scrollLeft <=0) step = -step; 这里改成 if (step > 0 && gundong.scrollLeft >= scrollWidth) clearInterval(timer)就行行了，要重复往左就改为 if (step > 0 && gundong.scrollLeft >= scrollWidth) gundong.scrollLeft=0

qingwadaxia_1 2017-10-29

打赏
举报

引用 1 楼 showbo 的回复:


    <style type="text/css">
        #gundong {
            width: 320px;
            margin: 0 auto;
            background: #dd127b;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
        }
    </style>
    <div id="gundong">asdddfsddsfdfsddd2523ddsfdddddr2ddetetdddgdfs8o980dd12dsaczvbety</div>

    <script>
        var gundong = document.getElementById("gundong");
        var step =1,scrollWidth=gundong.scrollWidth-gundong.offsetWidth;
        var timer=setInterval(function () {
            gundong.scrollLeft += step;
            if (step > 0 && gundong.scrollLeft >= scrollWidth) step = -step;
            else if (step <0 && gundong.scrollLeft <=0) step = -step;
        }, 50)
    </script>

Web开发学习资料推荐 javascript生成二维码 XDomainRequest，IE8+跨域请求对象

大神你这个是循环的啊如何一直往左滚动呢