老问题之：js的实现滚动字幕。

最新推荐文章于 2024-07-13 16:47:12 发布

学海无涯苦劲深

最新推荐文章于 2024-07-13 16:47:12 发布

阅读量426

点赞数

分类专栏：记录吧。

本文链接：https://blog.youkuaiyun.com/xp901229/article/details/9844661

版权

记录吧。专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在网页中实现滚动字幕的方法，包括使用旧标签&lt;marquee&gt;的局限性和一种更灵活的JS方案。通过JS定时器和元素的scrollLeft属性实现连续滚动，并提供了代码示例。讨论了如何优化代码以减少内存占用，如字符串拷贝技巧。同时，解答了关于clearInterval()使用时的风险问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于工作需要，实现一个js的滚动字幕，网上一搜，无非两种。

一个，使用标签元素<marquee> 如：

<marquee scrollAmount=2 width=300>我喜欢网页设计</marquee>

但之前做好的页面都换这个标签不太现实。

另一个，是js用定时器配合元素的scrollLeft 以及srollWidth来实践，感觉这个比较现实，参考这个了。关键点在于如何连续的滚动，

普遍的办法就是拷贝2个一样的元素。用了一个比较土的做法，把字符串拷贝成2份，中间加个空格（囧囧），然后滚动了一半马上回滚成最开始的样子。

代码如下：（使用时，目标元素一定得有 ‘white-space : nowrap’ 属性，要不然就scrollWitdh不够了。。。）

另外虽然 setRollTxtObj有3个参数，但一般用的时候，只必须设一个（js的自由- -！）。

如 rollTxtHnd.setRollTxtObj(destObj);

其实我也有个问题：测试 clearInterval() 能够去掉 timeOut的定时，但有风险么？看有没有高手能解惑一下。

/**
 *  warnning:  the tagObj must has the 
 *  			attribute 'white-space: nowrap'
 *  			And only for txt or txt in <span>.
 *  			tagObj must be raw js object
 *	8/8/2013 17:46 created
 *	8/8/2013 22:52 fixed the timer to timers.
 *
 * using:
 * 		just
 * 		rollTxtHnd.setRollTxtObj(yourDomObj);
 * */

var rollTxtHnd = {
tagObj: null,
timers: [],
delayTime: 500,
speed: 40,
orgTxt: '',

setRollTxtObj: function(tagObj, speed, delayTime) {
		this.stopRoll();
		if (tagObj.scrollWidth <= tagObj.offsetWidth)
		{
			return false;
		}
		this.orgTxt = tagObj.innerHTML; 
		this.tagObj = tagObj;
		tagObj.innerHTML = this.orgTxt + ' ' + this.orgTxt;

		if (speed) // has set ?
		{ this.speed = speed;}
		if (delayTime) // has set?
		{ this.delayTime = delayTime; }
		this.startAutoRoll();
		return true;
	},

rollWay: function () {
  // the edge between orgTxt and newTxt
  if (this.tagObj.scrollLeft >= (this.tagObj.scrollWidth/2) )
  {
	this.tagObj.scrollLeft = 0;
  }
  else
  {
	this.tagObj.scrollLeft++;
  }
},

startAutoRoll: function() {
  var self = this;
  var tmpTimer = setTimeout(function(){
	  var timer = setInterval('rollTxtHnd.rollWay()', self.speed);
	  self.timers.push(timer);
	 //console.log('create timer: ###');
  }, this.delayTime);

  this.timers.push(tmpTimer);


},

stopRoll: function() {
	if (this.timers.length > 0) // has one?
	{
	   this.resetAttrs();
	}
},

resetAttrs: function() {
   this.clearTimers(); // must first!!!!
   this.tagObj.scrollLeft = 0;
   this.tagObj.innerHTML = this.orgTxt;
   this.orgTxt = '';
   this.tagObj = null;
	},

clearTimers: function() {
	var timer;
	while (this.timers.length > 0)
	{
		timer = this.timers.shift();// from the header
		clearInterval(timer);
		//console.log('clear timer: !!!');
	}
 },
};