<html>
<head>
<style type="text/css">
#divMsg{
line-height:20px;
height:20px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var Scroll = new function(){
this.delay = 3000; //公告換行的時間
this.height = 20; //定義高度
this.step = 4; //步長
this.curHeight= 0;
this.stimer = null;
this.timer = null;
this.start = function(){ //開始翻頁-調用move方法
this.move();
}
this.move = function(){
var self = this;
if(this.curHeight == this.height) //如果顯示完一行
{
this.timer = setTimeout(function(){ //使用計時器-定時下一行的翻頁時間
self.move();
}, this.delay);
this.curHeight = 0;
if(this.element.scrollTop >= this.element.scrollHeight - this.height){ //滾動資訊已經完畢
this.element.scrollTop = 0;
}
return true;
}
this.element.scrollTop += this.step;
this.curHeight += this.step;
this.timer = setTimeout(function(){ //設置自動翻頁計時器
self.move();
}, 30);
}
this.stop = function(){ //清除定時期，停止滾動翻頁
clearTimeout(this.timer);
}
}
</script>
</head>
<body>
<div id="divMsg">
這是公告1<br/>
這是公告2<br/>
這是公告3<br/>
這是公告4<br/>
這是公告5<br/>
</div>
<script type="text/javascript">
Scroll.element = document.getElementById('divMsg');
Scroll.start();
</script>
<input type="button" value="開始" onclick="Scroll.start()"/>
<input type="button" value="停止" onclick="Scroll.stop()"/>
</body>
</html>
參考JavaScript實例自學手冊
留言列表
綜合知識 (3)
