字体移动

第一步当然是我们的CSS样式和HTML格式,都是一些简单的元素和样式,相信各位都懂得哈,我就不细说了。

 <div class="quan">
        <div id="left" class="left">
            中国很多民众都像我一样关注嫦娥五号的轨迹,同嫦娥五号一起遨游太空。我们对俄罗斯、欧洲等航天机构的美好祝愿表示感谢。嫦娥五号探测器12月1日成功在月球着陆并将开展后续工作。这是中国进行外空探索的历史性一步,也是国际合作与和平利用外空的历史性一步。
        </div>

第二步就是我们的JS代码了,其实也非常简单。

  1. 先获取元素,通过元素的innerText属性拿到文本。
  2. 通过for循环把得到的文本push到一个数组里面。
  3. 设置一个方法fn,在里面调用数组的splice方法。因为splice的返回值是删除的数组,所以把返回值接收到赋给另一个元素     splice(n,m,x)从索引n开始删除m个然后用x进行替换。
  4. 最后在点击方法里面写个定时器,每隔一秒让它调用fn函数一次。就间接的实现动态效果。
let left = document.getElementById('left');
        let right = document.getElementById('right');
        let btn = document.getElementById('btn');
        let strs = left.innerText;
        let ary = [];
        for (let i = 0; i < strs.length; i++) {
            ary.push(strs[i]);
        }
        function fn() {
            let s = ary.splice(0, 1);
            left.innerText = ary;
            right.innerText += s;
        }
        btn.onclick = function () {
            setInterval(() => {
                fn();
            }, 500);
        }

实现这种效果的方法还有很多,有大神的话可以在下面评论出来哦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值