面向对象的JavaScript文字滚动效果

发表于 2011年2月20日由 kily

看CJ的JavaScript教程到滚动文字效果那节，觉得很受用。大致修改了下放上来和大家分享。类似于门户网站上面的文字滚动效果，如有类同纯属虚构^!^

HTML：

<h1 id="title">This a H1 Title, isn't it?</h1>
<div class="clear"></div>
<input type="button" id="btn-1" value="开始" />
<input type="button" id="btn-2" value="结束" />

木有什么好说的，主要看JS。

JavaScript:

window.onload = function () {
	var getID = function (id) {
			return document.getElementById(id)
		},
		startBtn = getID("btn-1"),
		stopBtn = getID("btn-2"),
		H1 = getID("title");

	function ScrollText(s, ele, t) {
		/**
		 * 创建一个文字滚动对象
		 * s (要滚动的文字)
		 * ele (HTML节点对象)
		 * t (滚动时间隔)
		 */
		this.s = s.split(""); //将传入字符串分割成数组
		this.ele = ele;
		this.t = t || 300; //默认值为300毫秒
	}
	ScrollText.prototype = {
		start: function () { //开始滚动方法
			var s = this.s,
				ele = this.ele;
			//alert(s.shift());
			clearInterval(this.interval);
			this.interval = setInterval(function () {
				s.push(s.shift()); //将字符串数组第一个字符剪切并添加到数组末尾
				//类似挤牙膏^!^
				ele.innerHTML = s.join("");
			}, this.t);
		},
		stop: function () { //结束滚动方法
			clearInterval(this.interval);
		}
	}

	var st = new ScrollText("这是可以设置的滚动文字哦！", H1, 500);

	//“实例化”对象
	startBtn.onclick = function () {
		st.start();
	};
	stopBtn.onclick = function () {
		st.stop();
	}

}

该说的都在注释里。好吧，不想看代码看什么？看Demo呀！点击这里查看

《面向对象的JavaScript文字滚动效果》上有 34 条评论

afeiship 在 2011年5月7日10:55 说：

marquee是有缝的,
JS实现的这种是无缝的.

回复 ↓
- kily 在 2011年5月7日14:25 说：
  
  @afeiship 木有用过marquee哈！
  
  回复 ↓
coolicer 在 2011年5月5日18:37 说：

我认识你，你不一定认识我，呵。
ＰＳ：只是记得你的名字

回复 ↓
- kily 在 2011年5月6日12:52 说：
  
  @coolicer 什么意思？？？？？？
  
  回复 ↓
  - coolicer 在 2011年5月6日16:12 说：
    
    加过你ＱＱ的，不知道还在不。
    
    回复 ↓
    - kily 在 2011年5月7日10:49 说：
      
      @coolicer 我常期隐身在线的哦！有事直接喊我~
      
      回复 ↓
毕扬在 2011年4月10日20:59 说：

博客很久没更新了啊

回复 ↓
- kily 在 2011年4月11日08:50 说：
  
  @毕扬真是对不住大家了呀，最近自己的事情太多了没时间也没心情写，过几天就正常了哈！
  
  回复 ↓
初刻网在 2011年4月10日13:48 说：

终于解决问题了，哈哈
谢谢分享

回复 ↓
- kily 在 2011年4月11日08:53 说：
  
  @初刻网 My pleasure^!^
  
  回复 ↓
好吃在 2011年4月10日08:29 说：

顶楼主~~~~

回复 ↓
长沙瑜伽欢迎你在 2011年4月8日17:35 说：

喜欢瑜伽的朋友可以去看看http://www.yoga100.com

回复 ↓
zwwooooo 在 2011年4月5日18:50 说：

不错，如果能动画一点就赞了

回复 ↓
拉拉淘宝在 2011年3月30日10:44 说：

谢谢，笑纳了

回复 ↓
www.smuwcwt.com 在 2011年3月26日00:07 说：

哥们。最近人呢？日志也不写了？

回复 ↓
- kily 在 2011年3月26日16:45 说：
  
  @www.smuwcwt.com 呵呵。最近在忙工作的事情呀！所以没空写博客了。有时间了肯定会更新的哈！
  
  回复 ↓
猎人在 2011年3月11日19:13 说：

嘿嘿，支持下!博主~

回复 ↓
hzlzh 在 2011年3月8日22:29 说：

折腾JQ 多一些，原生的相对弱了

回复 ↓
微酷在 2011年3月6日21:06 说：

博主貌似更新比较慢唉。

回复 ↓
蜂胶在 2011年3月5日17:29 说：

学习中，谢谢分享。

回复 ↓
A.shun 在 2011年2月25日19:47 说：

基本没用过滚动的东西

回复 ↓
先看看在 2011年2月25日13:03 说：

效果还挺不错的

回复 ↓
vancl凡客诚品在 2011年2月24日10:09 说：

这个有点老了~~~~

回复 ↓
追梦在 2011年2月23日13:23 说：

呵呵，JS做的，不错。以前上学的时候也喜欢做滚动效果，那是用的是那个html标签，都记不清是哪个标签了。

回复 ↓
- kily 在 2011年2月23日15:41 说：
  
  @追梦 marqee吧，不用这种东西已经很长时间了！
  
  回复 ↓
林西老九在 2011年2月23日10:45 说：

绿色背景不好看，哈

回复 ↓
- kily 在 2011年2月23日15:42 说：
  
  @林西老九改成你想要的，说吧！想要什么颜色？
  
  回复 ↓
  - 林西老九在 2011年2月23日15:45 说：
    
    哈哈，清淡一点的就成
    
    回复 ↓
    - kily 在 2011年2月23日21:28 说：
      
      @林西老九换了个暗色调的！
      
      回复 ↓
      - 林西老九在 2011年3月4日11:32 说：
        
        恩，这次看着舒服多了，嘿嘿。
nobird 在 2011年2月22日21:51 说：

围观一下…让我自己独立完成这样一段估计很有难度… – -

回复 ↓
- kily 在 2011年2月22日23:22 说：
  
  @nobird 呵呵！我也是照猫画虎看教程学的哈.
  
  回复 ↓
踏雪残情在 2011年2月20日17:50 说：

嗯，良好的结构是一个好的开端，之后建立于该骨架之上，显得更加稳定。

回复 ↓
- kily 在 2011年2月20日19:23 说：
  
  @踏雪残情呵呵。是滴，都加油哈。
  
  回复 ↓

发表评论取消回复