junyong's blog

/**
* 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});

rolling.html

// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
  return html.replace(/&/gi,'&');
});
 
// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});

jQuery("

", {
    id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red"); 
    }
}).appendTo("body");

클릭