跑马灯文字的三种实现方式
html实现
- 使用 marquee 标签,配合它的一些属性,可以实现功能强大的跑马灯文字,
<marquee> 跑马灯 html实现 </marquee>
- 但是,这个 marquee 标签,并没有被W3C标准录入,也就是在未来的某个时候,它可能会被弃用,请慎用
为什么这么好的东东,不被认同呢?
在W3C标准中,规定功能性分离。分成为结构、样式、行为三个部分,这三个部分分别包括了,结构(xHTML、XML),样工(CSS),行为(DOM、ECMAScript)。
marquee 已经不只是结构html了,它可以实现js, css的功能。
js实现
- 一般不推荐使用js实现
这里贴出js的一种写法
<script>
function () {
var box = document.getElementById("box");
var wrap = document.getElementById("wrap");
var conBegin = document.getElementById("conBegin");
var conBegin_width = getCss(conBegin,"width");
var timer = window.setInterval(move,10);
function move() {
wrap.scrollLeft++;
var curLeft = wrap.scrollLeft;
if (curLeft>=conBegin_width) {
wrap.scrollLeft = 0;
}
}
box.onmouseover = function () {
window.clearInterval(timer);
};
box.onmouseout = function () {
timer = window.setInterval(move,10);
};
}();
function getCss(curEle, attr) {
var val = null,reg = null;
if ("getComputedStyle" in window) {
val = window.getComputedStyle(curEle,null)[attr];
} else {
if (attr === "opacity") {
val = curEle.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val = reg.test(val) ? reg.exec(val)[1]/100 : 1;
} else {
val = curEle.currentStyle[attr];
}
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val) ? parseFloat(val) : val;
}
</script>
css实现
- 使用css3非常简单
<div class="merquee">
<span class="merquee-txt">跑马灯 css实现</span>
</div>
- css
.merquee{
height: 25px;
line-height: 25px;
box-sizing: border-box;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
.merquee-txt{
display: inline-block;
padding-left: 100%; /* 从右至左开始滚动 */
animation: marqueeTransform 16s linear infinite;
}
@keyframes marqueeTransform {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
}