<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 滚动的文字效果 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
//传统式编程
/*
参数说明
s:要设置的文字
obj:要操作的对象
attr:要操作对象的属性
t:执行时间
*/
function strollText(s,obj,attr,t){
s = s.split("");
setInterval(function(){
s.push(s.shift());
obj[attr] = s.join("");
},t);
}
//###################################
//面象对象式编程
/*
参数说明
s:要设置的文字
obj:要操作的对象
attr:要操作对象的属性
t:执行时间
*/
function strollText(s,obj,attr,t){
this.s = s.split("");
this.obj = obj;
this.attr = attr;
this.t = t || 300;
}
//prototype上添加两个方法(开始｜停止)
strollText.prototype =
{
start:function(){
var s = this.s;
var o = this.obj;
var a = this.attr;
this.interval = setInterval(function(){
s.push(s.shift());
o[a] = s.join("");
},this.t);
},
stop:function(){
clearInterval(this.interval);
}
};
//对getElementById进行封装
function $(id){
return document.getElementById(id);
}
//页面加载完成以后执行的操作
window.onload = function(){
var startBtn = $('startBtn');
var stopBtn = $('stopBtn');
//获取对象
var p = $("scrollText");
//对象实例化
st =new strollText("要滚动的文字",p,'innerHTML',300);
startBtn.onclick = function(){
st.start();
}
stopBtn.onclick = function(){
st.stop();
}
}
</script>
<BODY>
<br />
<style>
#scrollText{
background:yellow;
height:20px;
}
</style>
<input type="button" id="startBtn" value="开始">
<input type="button" id="stopBtn" value="停止">
<br>
<br>
<br>
<p id="scrollText"></p>
</BODY>
</HTML>
滚动的文字
