JavaScript跑马灯实例

最新推荐文章于 2023-09-28 14:48:16 发布
最新推荐文章于 2023-09-28 14:48:16 发布
阅读量212 收藏 1
点赞数
分类专栏： # 前端实例 文章标签： javascript跑马灯实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40318474/article/details/103522620
版权

  1. 知识储备
    obj.charAt(n): 返回字符串中的第n个字符
    obj.substring(n,m): 根据索引值获取子序列，n<=子序列<m
    obj.length : 获取当前字符串长度

    创建一个定时器
    setInterval(“执行代码”, 时间间隔)

  2. 代码

        <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="i1">欢迎××××莅临指导</div>
            <script>

                function f1(){
                    //console.log(1);
                    //根据ID获取指定标签的内容
                    var tag = document.getElementById('i1');
                    //获取标签内部的内容
                    var content = tag.innerText;
                    //取content的第一个字符
                    var l = content.charAt(0);
                    //取content剩余的字符
                    var r = content.substring(1, content.length);
                    //拼接
                    var new_str = r + l;
                    //赋值
                    tag.innerText = new_str;
                }

                // 创建一个定时器
                //setInterval("alert(123);", 2000); //msecond
                setInterval("f1()", 500);
            </script>
        </body>
    </html>
73、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用javascript实现的跑马灯控件，文字跑马灯或图片跑马灯皆可噢！
09-27
自己用js实现的一个跑马灯控件，通过传入参数对象实例化它，然后启动即可。支持的参数有 div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
javascript新闻跑马灯实例代码
10-23
主要介绍了javascript新闻跑马灯实例代码，所谓的跑马灯就是无缝滚动效果代码，常见于新闻公告之类的功能，需要的朋友可以参考下
js实现跑马灯
h220801__zzl的博客
03-01 1315
js实现跑马灯，给定数组
JS实现跑马灯效果
最新发布
CHH2177094的博客
09-28 340
【代码】JS实现跑马灯效果。
原生js实现跑马灯（走马灯）效果
写写代码，慢慢进步
08-08 6383
js实现跑马灯效果
javascript跑马灯抽奖实例讲解
10-23
主要为大家介绍了javascript跑马灯抽奖特效，具有一定的参考价值，感兴趣的朋友可以参考一下
Javascript实现跑马灯效果的简单实例
10-22
下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现无缝隙跑马灯
TianXuab的博客
07-06 1074
此示例将5条消息滚动显示。动画持续10秒钟，并无限循环。JavaScript代码使用animationiteration事件来检测动画何时结束，将第一个元素复制到列表的末尾，然后将拼接的元素移动到列表末尾。这样就可以实现无缝隙的跑马灯效果。
js for加减乘除
Xerale的博客
08-20 417
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
JavaScript实现跑马灯效果
05-25
使用JavaScript实现的跑马灯效果。跑马灯图片使用自动添加img标签实现，可以添加10张图片，只需修改图片数组的内容，在数组中添加相应图片名称即可。
javascript跑马灯
03-26
javascript跑马灯,无缝滚动，滚动停止。
js实例—跑马灯
06-15
跑马灯的js代码 小实例
JavaScript跑马灯图
10-27
JavaScript跑马灯图
JS动画实现跑马灯
Janice_97的博客
04-24 454
基于JS动画实现无缝滚动的跑马灯
JS 跑马灯效果实现（很好用）
热门推荐
yangsen251024的专栏
02-26 5万+
实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。 好用之处在于： 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码，如果看不懂，可以跑这个列子 文字1 文字2 文字3 文字4 文字5 function test() { $("#RunTopic").find("li:first").appendTo(
javascript跑马灯效果
m0_47505062的博客
01-18 2019
javascript跑马灯效果,代码如下: <script type="text/javascript"> var pos=0; var width=100; var speed=150; var msg="欢迎您访问本网站!"; for(i=0;i<width;i++)msg=" "+msg; function runlight(){ window.status=msg.substring(pos,pos+width); if(pos++==msg.length-1)pos=0; win
js实现文字跑马灯效果
高先生的猫
06-22 2865
js实现文字跑马灯效果
用javascript 制作跑马灯
qq_38722696的博客
11-12 646
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma
跑马灯 javascript
04-29
以下是一个简单的跑马灯的Javascript代码示例： ```html <div id="marquee"> <p>这是一条跑马灯内容</p> </div> ``` ```javascript var marquee = document.getElementById('marquee'); var marqueeChild = marquee.getElementsByTagName('p')[0]; var marqueeWidth = marquee.offsetWidth; var marqueeChildWidth = marqueeChild.offsetWidth; var currentPos = 0; function marqueeAnimation() { currentPos -= 1; marqueeChild.style.left = currentPos + 'px'; if (currentPos < -marqueeChildWidth) { currentPos = marqueeWidth; } window.requestAnimationFrame(marqueeAnimation); } marqueeChild.style.position = 'absolute'; marqueeChild.style.width = '100%'; marquee.style.overflow = 'hidden'; marqueeAnimation(); ``` 这段代码会让跑马灯中的文本往左无限滚动。使用 `requestAnimationFrame` 方法来实现动画效果，每次调用 `marqueeAnimation` 函数时更新文本的位置。当文本滚出跑马灯的左侧时，将其位置重置到跑马灯的右侧，实现无限循环滚动的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值