下载文档原格式
⽂字跑马灯（⽆缝衔接）CSS+JS完美实现最近要做⼀个系统公告的跑马灯效果，在⽹上找了很多，发现有js和css的⽅法，但是都不太好⽤。
所以⾃⼰结合了⼀下，做了个css+js的跑马灯效果。
如果觉得好⽤或者发现问题，欢迎评论沟通哈~本来是vue+ts的，我改成了纯html+css+js的⽅式，⼤家想改成什么的也都⽅便。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>⽂字跑马灯 CSS+JS完美实现</title><style type="text/css">.box {width: 50%;overflow: hidden;color: #fff;background-color: #000;white-space: nowrap;}.content {animation: move 5s linear infinite;display: inline-block;cursor: pointer;}</style></head><body><div class="box"><div class="content">测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来</div></div><script>scroll();function scroll() {createStyle();let content = document.querySelector('.content');let box = document.querySelector('.box');let contentWidth = content.offsetWidth;let boxWidth = box.offsetWidth;if ( contentWidth < boxWidth ) {// 内容宽度⼩于盒⼦宽度，停⽌滚动content.style.setProperty('animation','0s');}else {// 根据宽度设置滚动距离和动画时长。
html标签特效代码大全（让你制作漂亮的页面效果）〈!〉跑马灯〈marquee>.。
.〈/marquee〉普通卷动〈marquee behavior=slide>.。
.〈/marquee〉滑动〈marquee behavior=scroll>.。
.</marquee〉预设卷动〈marquee behavior=alternate>.。
.〈/marquee〉来回卷动〈marquee direction=down>。
</marquee〉向下卷动〈marquee direction=up〉..。
</marquee〉向上卷动<marquee direction=right></marquee〉向右卷动<marquee direction=’left’〉</marquee>向左卷动〈marquee loop=2>...</marquee>卷动次数<marquee width=180〉。
.</marquee〉设定宽度<marquee height=30〉.。
.</marquee>设定高度<marquee bgcolor=FF0000〉。
..〈/marquee>设定背景颜色<marquee scrollamount=30>..。
</marquee〉设定滚动速度<marquee scrolldelay=300〉。
..〈/marquee〉设定卷动时间〈marquee onmouseover=”this.stop()">。
</marquee>鼠标经过上面时停止滚动〈marquee onmouseover=”this.start（）”〉..。
</marquee>鼠标离开时开始滚动〈！〉字体效果<h1>。
html跑马灯⾛马灯效果实现跑马灯的⽅法很多，其中最简单的是采⽤⼀句Html代码来实现，我们在需要出现跑马灯效果的地⽅插⼊“<marquee>滚动的⽂字</marquee>”语句，它的效果如下所⽰：滚动的⽂字 适当的运⽤<marquee>标签的参数，可以表现出不同的效果，请看下⾯的⼏个例⼦： 1、左右弹来弹去的跑马灯弹来弹去跑马灯! 实现的⽅法就是在IE的标签上稍微多加了⼏个参数产⽣了更加丰富的变化。
设置behavior=alternate表⽰双向移动，direction= left表⽰运动⽅向向左。
marquee的宽度可以使⽤绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。
需要说明的是该效果在 Netscape下是看不到的。
源码粘贴框：<marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee> ２、跑的很快的跑马灯跑的很快跑马灯! 只要在<marquee>标签后⾯加上“scrollamount=15”即可,修改=后边的数字参数即可限制⽂字移动的速度。
３、带有超级链接的跑马灯 实现的⽅法很简单，把整个<marquee></marquee>语句包含在超链接中就⾏，你看看下⾯的代码就清楚了。
当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯就可⽤来发布滚动新闻或是做站点导航了。
如果你想给跑马灯的⽂字加上颜⾊，换⽤不同的字体（默认是宋体，换体就要加代码），只要在⽂字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就⾏了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜⾊，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上<STRONG>。
Marquee 标签跑马灯1. align设定<marquee>标签内容的对齐方式absbottom：绝对底部对齐（与g、p等字母的最下端对齐）absmiddle：绝对中央对齐baseline：底线对齐bottom：底部对齐（默认）left：左对齐middle：中间对齐right：右对齐texttop：顶线对齐top：顶部对齐代码如下: <marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。
</marquee><marquee align="absmiddle">align="absmiddle"：绝对中央对齐。
</marquee><marquee align="baseline">align="baseline"：底线对齐。
</marquee><marquee align="bottom">align="bottom"：底部对齐（默认）。
</marquee><marquee align="left">align="left"：左对齐。
</marquee><marquee align="middle">align="middle"：中间对齐。
</marquee><marquee align="right">align="right"：右对齐。
</marquee><marquee align="texttop">align="texttop"：顶线对齐。
前端学习----实现跑马灯的三种⽅式参考博客:⽂中提出了三种实现跑马灯的⽅式,分别是1.利⽤js实现2.利⽤html标签实现3.利⽤css实现⽂中也给出了3种⽅法优劣的⽐较,这⾥不再赘述1.利⽤js实现跑马灯<div id="move">三玖是我⽼婆,春⽇野穹是我妹妹</div>#move{position: absolute;width: 230px;background: grey;color:white;}window.onload=function(){var move=document.getElementById('move');move.style.right='-230px';moveRight();}function moveRight(){if(parseInt(move.style.right)>screen.width) {move.style.right='0';}move.style.right=parseInt(move.style.right)+3+'px';setTimeout(moveRight,10);}这个就是利⽤js操控dom元素的属性利⽤setTimeout调⽤⾃⼰不断改变right的⼤⼩进⾏移动2.利⽤html 实现这个是利⽤marquee标签实现3.利⽤css 实现//html<div id="move"><div id="cont">三玖是我⽼婆,春⽇野穹是我妹妹</div></div>// css#move{position: relative;width: 230px;height: 40px;background: grey;color:white;}#cont{position:absolute;left: 0;right: 0;transition: left 10s linear;}//jswindow.onload=function(){var cont=document.getElementById('cont');cont.style.left="-230px";}利⽤transition实现跑马灯效果css实现⽆缝滚动//html<div id="move"><div id="cont"><div class="text">1三玖是我⽼婆,春⽇野穹是我妹妹</div><div class="text">2三玖是我⽼婆,春⽇野穹是我妹妹</div></div></div>//css*{padding: 0;margin:0;}#move{position: relative;width: 230px;height: 20px;background: grey;color:white;overflow: hidden;}#cont{width: 200%;height: 20px;position:absolute;left: 0;top: 0;animation:5s move infinite linear;}#cont .text{display: inline-block;float: left;width: 50%;height: 20px;}@keyframes move{0%{left: 0;}100%{left: -100%;}}利⽤animation实现⽆缝滚动当然实际上是利⽤了2条相同的数据。
網頁跑馬燈語法製作marquee 語法教學網頁跑馬燈是常見的一種表示方法，你可以透過簡單的語法製作符合網頁風格的跑馬燈，同時除了文字型跑馬燈之外，還可以設計成連結式或圖片式跑馬燈。
只要透過簡單的HTML marquee 標籤就可以做到，再透過屬性參數的設定可以達到各種效果唷！marquee 語法使用方法很簡單，由marquee 開頭，要跑的文字或圖片放中間，再由marquee 結尾即可透過屬性參數設定跑馬燈的跑法，將跑馬燈做成由上往下、由下往上、由左至右或由右至左等效果；除此之外還可以加入跑馬燈的背景顏色、行為模式、對齊方式、設定速度、高度等等項目，調整成適合網頁的風格。
跑馬燈屬性參數∙方向設定：direction="參數值"；參數值有up（向上）、dun（向下）、left （向左）、right（向右）。
∙對齊設定：align="參數值"；參數值有top（向上對齊）、midden（垂直至中）、botton（項下對齊）。
∙速度設定：scrollamount="參數值" ；參數值為數字，通常設定1~10 的範圍，數字越大跑得越快。
∙長度設定：height="參數值"；參數為數字，自行設定。
∙寬度設定：width="參數值"；參數為數字，自行設定。
∙行為設定：behavior="參數值"；參數有alternate（來回跑）、slide（跑入後停止）。
∙背景顏色：bgcolor="參數值"；參數可設定為顏色的色碼，不設定則沒有顏色。
為跑馬燈加上文字連結與圖片你可以搭配著參數設定，讓連結或圖片也可以照著設定動作。
滑鼠移入後自動停止的方法這是非常普遍的用法，尤其是當你的跑馬燈有超連結或圖片連結，可以讓網友點選的時候，一定要讓網友的滑鼠移入後自動停止才對，像是促銷優惠或廣告banner 等都是常見的手法語法如下。
html炫酷跑马灯标签
<marquee>...</marquee>
普通卷动
<marquee behavior=slide>...</marquee>
滑动
<marquee behavior=scroll>...</marquee>
预设卷动
<marquee behavior=alternate>...</marquee>
来回卷动
<marquee direction=down>...</marquee>
向下卷动
<marquee direction=up>...</marquee>
向上卷动
<marquee direction=right></marquee>
向右卷动
<marquee direction=
’
left
’
></marquee>
向左卷动
<marquee loop=2>...</marquee>
卷动次数
<marquee width=180>...</marquee>
设定宽度
<marquee height=30>...</marquee>
设定高度
<marquee bgcolor=FF0000>...</marquee>
设定背景颜色
<marquee scrollamount=30>...</marquee>
设定滚动速度
<marquee scrolldelay=300>...</marquee>
设定卷动时间
<marquee onmouseover="this.stop()">...</marquee> 鼠标经过上面时停止滚动
<marquee onmouseover="this.start()">...</marquee> 鼠标离开时开始滚动。
