IPTV获取焦点后文字滚动代码(跑马灯)

前言

在IPTV项目中，经常有节目获取焦点时，若文字太长则让文字滚动，失去焦点时让文字保持静止不动，此处记录两个方法，一是marquee标签实现，另外是用JS模拟实现。

marquee标签

闭合标签，基本使用：

<marquee direction="left" scrolldelay="150">需要滚动的文字</marquee>

属性介绍：

behavior // 可用的值为scroll(滚动)、slide(滑动)、alternate(改变，类似于光学的反射路径)，如果没有指定值，默认是scroll
direction // 设置方向，可用的值为left、right、up、down，如果没有指定值，默认是left
scrolldelay // 设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）
bgcolor // 设置背景色，可以为指定的单词或RGB
width // 宽度，可设置百分比
height // 高度，可设置百分比
loop // 滚动次数，默认为-1，无限滚动

还有很多属性如果有需要可百度了解。

此属性已在html/html5中废弃，但如果产品不嫌弃此方法丑的话可以使用，否则使用js实现

js模拟实现

直接贴代码:

/**
* 文字滚动
* 参数: 对象形式，格式为 
	{
		state: "创建(create) || 清除(clear))", // 必须
		obj: "包含文字的元素", // 必须
		oldText: "原有文字", // 创建时不用写
		newText: "滚动文字" // 清除时不用写
	}
**/
var textScroll = {
	timer: null,
	roll: function (obj) {
		if (!obj || typeof obj !== "object") return;
		var num = 0;
		var oText = obj.obj,
			oldText = obj.oldText;
		if (obj.state === "create") {
			var width = oText.clientWidth,
				text = obj.newText;
			oText.innerHTML = "";
			function createEle(left) {
				left = left ? left : 0;
				var o = document.createElement('div')
				o.style.whiteSpace = "nowrap";
				o.style.position = "absolute";
				o.style.top = "0";
				o.style.left = left;
				o.innerHTML = text;
				oText.appendChild(o);
				return o;
			}
			var oDiv1 = createEle(),
				oDivWidth = oDiv1.clientWidth,
				leftStr = oDivWidth + 20 + "px",
				oDiv2 = createEle(leftStr);

			var oDiv1Left = oDiv1.offsetLeft,
				oDiv2Left = oDiv2.offsetLeft;
			clearInterval(this.timer);
			this.timer = setInterval(function () {
				oDiv1.style.left = oDiv1Left - num + 'px';
				oDiv2.style.left = oDiv2Left - num + 'px';
				num += 1.5;
				if (num >= oDivWidth + 20) {
					num = 0;
				}
			}, 30);
		} else if (obj.state === "clear") {
			if(this.timer) {
				clearInterval(this.timer);
				oText.innerHTML = oldText;
			}
		}
	}
}

使用方法直接调用，参数为对象

// 创建滚动
textScroll.roll({
    state: "create",
    obj: obj,
    oldText: "这是需要滚动的文字"
});
// 清除滚动
textScroll.roll({
    state: "clear",
    obj: obj,
    newText: "这是未获取焦点时展示的文字"
})

结语

如果不区分滚动文字与静态展示文字，则两个传相同的文字即可。

-------------End，感谢阅读！-------------