이걸 Ticker라고 부르는 지 몰라서 검색하는데 한참 헤맸지만,
검색결과도 그닥 시원찮아서 (돈 받고 파는건 뭥미;;;)
그냥 간단 버전으로 자작.
예외처리나 파라미터 처리 같은 건 전혀 없음.
prototype.js 필요함.
더보기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Ticker</TITLE>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var Ticker = Class.create({
initialize: function (el, messages) {
this.delay = 10;
this.speed = 1;
this.waiting = 3000;
this.turnover = 30;
this.messages = messages;
this.message_id = -1;
this.el = el;
this.timer;
if (this.el) {
this.el.observe('mouseover', this.do_stop.bind(this));
this.el.observe('mouseout', this.do_continue.bind(this));
}
},
do_stop: function(event) {
clearTimeout(this.timer);
this.timer = "";
},
do_continue: function(event) {
this.move();
},
set_messages: function(messages) {
this.messages = messages
},
get_message: function() {
this.message_id++;
if (this.message_id == this.messages.length) {
this.message_id = 0;
}
return this.messages[this.message_id];
},
start: function() {
this.el.innerHTML = this.get_message();
var self = this;
setTimeout(function(){self.move();}, this.waiting);
},
move: function() {
if (!this.el.style.top) {
this.el.style.top = "0px";
}
this.el.style.top = (parseInt(this.el.style.top, 10) - this.speed) + "px";
if (parseInt(this.el.style.top, 10) < (-1*this.turnover)) {
this.el.style.top = this.turnover + "px";
this.el.innerHTML = this.get_message();
}
var self = this;
if (parseInt(this.el.style.top, 10) == 0) {
this.timer = setTimeout(function(){self.move();}, this.waiting);
} else {
this.timer = setTimeout(function(){self.move();}, this.delay);
}
}
});
var tic;
function ticker() {
tic = new Ticker($('ticker'), ["abc", "def", "ghi", "jkl"]);
tic.start();
}
</script>
<style>
#ticker_wrap {
overflow: hidden;
border: 1px solid gray;
width: 300px;
height: 30px;
}
#ticker {
position:relative;
top: 0px;
width: 100%;
border: 1px solid red;
}
</style>
</HEAD>
<BODY onload="ticker()">
<div id="ticker_wrap">
<div id="ticker"></div>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Ticker</TITLE>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var Ticker = Class.create({
initialize: function (el, messages) {
this.delay = 10;
this.speed = 1;
this.waiting = 3000;
this.turnover = 30;
this.messages = messages;
this.message_id = -1;
this.el = el;
this.timer;
if (this.el) {
this.el.observe('mouseover', this.do_stop.bind(this));
this.el.observe('mouseout', this.do_continue.bind(this));
}
},
do_stop: function(event) {
clearTimeout(this.timer);
this.timer = "";
},
do_continue: function(event) {
this.move();
},
set_messages: function(messages) {
this.messages = messages
},
get_message: function() {
this.message_id++;
if (this.message_id == this.messages.length) {
this.message_id = 0;
}
return this.messages[this.message_id];
},
start: function() {
this.el.innerHTML = this.get_message();
var self = this;
setTimeout(function(){self.move();}, this.waiting);
},
move: function() {
if (!this.el.style.top) {
this.el.style.top = "0px";
}
this.el.style.top = (parseInt(this.el.style.top, 10) - this.speed) + "px";
if (parseInt(this.el.style.top, 10) < (-1*this.turnover)) {
this.el.style.top = this.turnover + "px";
this.el.innerHTML = this.get_message();
}
var self = this;
if (parseInt(this.el.style.top, 10) == 0) {
this.timer = setTimeout(function(){self.move();}, this.waiting);
} else {
this.timer = setTimeout(function(){self.move();}, this.delay);
}
}
});
var tic;
function ticker() {
tic = new Ticker($('ticker'), ["abc", "def", "ghi", "jkl"]);
tic.start();
}
</script>
<style>
#ticker_wrap {
overflow: hidden;
border: 1px solid gray;
width: 300px;
height: 30px;
}
#ticker {
position:relative;
top: 0px;
width: 100%;
border: 1px solid red;
}
</style>
</HEAD>
<BODY onload="ticker()">
<div id="ticker_wrap">
<div id="ticker"></div>
</div>
</BODY>
</HTML>
