网页中时常能看到文字滚动的效果，尤其是在网页的广告中，下面记两种实现的方法
第一种
使用marquee标签实现
marquee标签是html中的默认标签，但是在html5中已被取消，虽然还有部分浏览器支持这个标签，但是现在这个标签是不被推荐使用的(据说是因为其会造成啥子问题)marquee标签中有direction属性可以设置滚动方向，scrollamount属性设置滚动速度
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>滚动字幕</title>
</head>
<body>
<script>
function ColorGetFn(dom){ document.getElementById('colorInput').value = dom.value;
document.getElementById("gun").style.color=dom.value;
}
function ColorInputFn(dom){
document.getElementById('colorGet').value = dom.value;
document.getElementById("gun").style.color=dom.value;
}
function BgColorGetFn(dom){
document.getElementById('colorInput').value = dom.value;
document.getElementById("gun").style.background=dom.value;
}
function BgColorInputFn(dom){
document.getElementById('colorGet').value = dom.value;
document.getElementById("gun").style.background=dom.value;
}
function TextInput(dom){
var txt = dom.value;
document.getElementById("gun").innerHTML=txt;
}
</script>
<style>
*{margin:0;}
marquee{
background:#000;
color:#fff;
font-size:180px;
width:100%;
height:350px;
}
form{
margin-top:50px;
margin-left:20px;
}
</style>
<marquee id="gun" scrollamount="15">这是预览文本</marquee>
<p align="center">以上是效果预览</p>
<form>
<label>请输入文本</label>
<input placeholder="输入完点击空白处生效" id="in" onchange="TextInput(this)"><br>
<br>
<label id="test">文字颜色选择:</label>
<input type="color" id="colorGet" onchange="ColorGetFn(this)"> <br>
<br>
<label>颜色编码:</label>
<input type="text" id="colorInput" onchange="ColorInputFn(this)" value="#fff"> <br>
<label>(输入#fff是白色，输入#000是黑色！)</label>
<br><br>
<label id="test">背景颜色选择:</label>
<input type="color" id="colorGet" onchange="BgColorGetFn(this)"> <br>
<br>
<label>颜色编码:
<input type="text" id="colorInput" onchange="BgColorInputFn(this)" value="#fff"> <br>
(输入#fff是白色，输入#000是黑色！) </label>
</form>
</body>
</html>效果图：
第二种
使用js实现
使用js使用的主要思路是在一个div标签中添加一个span标签，span标签使用绝对定位的方式确定位置，通过js改变span标签与div标签的左边距来实现文字向左活动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
<style>
*{
padding:0;
margin:0;
}
#marquee {
color: white;
font-size:300px;
display: block;
width: 100%;
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
background:#000;
}
#marquee_text {
position: absolute;
height:100%;
top:auto;
left: 100%;
line-height: auto;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
}
#in{
width:100%;
height:200px;
font-size:100px;
}
#col{
width:50%;
height:100px;
}
.sp{
font-size:50px;
}
</style>
</head>
<body>
<div id="marquee">
<span id="marquee_text">这是默认样式哦</span>
</div>
<input type="text" placeholder="请输入要滚动的文字" id="in" onchange="TextInput(this)"><br>
<span class="sp">请选择字体颜色</span>
<input type="color" id="col" onchange="ColorChange(this)"><br>
<span class="sp">请选择背景颜色</span>
<input type="color" id="col" onchange="BgColorChange(this)">
</body>
<script type="text/javascript">
function TextInput(dom){
var txt = dom.value;
document.getElementById("marquee_text").innerHTML=txt;
}
function ColorChange(dom){
document.getElementById("marquee_text").style.color = dom.value;
}
function BgColorChange(dom){
document.getElementById("marquee").style.background = dom.value;
}
marquee("marquee", "marquee_text");
function marquee(p, s) {
var scrollWidth = document.getElementById(p).offsetWidth;
var textWidth = document.getElementById(s).offsetWidth;
var i = scrollWidth;
console.log(scrollWidth, textWidth);
function change() {
i=i-5;
if (i < -textWidth) {
i = scrollWidth;
}
document.getElementById(s).style.left = i + "px";
window.requestAnimationFrame(change);
}
window.requestAnimationFrame(change);
}
</script>
</html>效果图:
