javascript 상하 롤링 v1.0

script 2010. 1. 31. 22:39
/**
* rolling js v1.0
* by junyong (http://junyong.pe.kr)
*/
function rolling(options) {
	var self = this;
	this.object = document.getElementById(options.rollId);
	this.object.onmouseover = function() { self.stop(); };
	this.object.onmouseout = function() { self.play(); };
	this.delay = options.delay || 1000;
	this.speed = options.speed || 50;
	this.step = options.step || 1;
	this.mover = options.mover || false;
	this.elChildHeight = options.childHeight;
	this.elHeight = this.object.offsetHeight;
	this.elPosition = 0;
	this.object.appendChild(this.object.cloneNode(true));
	this.control = setTimeout(function() {self.play()}, this.delay);
}
rolling.prototype = {
	play:function() {
		var self = this, time;
		this.elPosition = this.elPosition>(this.mover?this.elHeight:0) ? this.elPosition-this.elHeight : this.elPosition+1;
		this.object.style.top = (this.mover ? -this.elPosition : this.elPosition) + "px";
		this.control = setTimeout(function() {self.play()}, this.elPosition%(this.elChildHeight*this.step)==0?this.delay:this.speed);
	},
	stop:function() {
		clearTimeout(this.control);
	}
}

간단하게 사용할 수 있는 상하 롤링 스크립트 소스
사용은 아래와 같이
roll1 =  new rolling({rollId: "rollText1", delay: 1000, speed: 10, step: 2, mover: true, childHeight: 18});

간단 예제 파일첨부
다음버전은 좌우 롤링도..
: