bata's log

フロントエンド系のTipsとかメモ

オブジェクト指向の書き方

オブジェクト指向の書き方を練習するために前に作ったやつ。

HTML

<div id="wrap"></div>

JavaScript

(function($){

    var n = 99;
    var wrap = $('#wrap');


    var Box = function(i,selector, x, time){
        this.i = i;
        this.x = i*10;
        this.selector = selector;
        this.time = time;
        this.init();
    };

    Box.prototype = {

        init: function(){
            this.createHtml();
            this.setAction();
        },

        createHtml: function(){
            wrap.append('<div class=\"obj obj' + this.i + '\" style=\"left:' + this.x + 'px;\"></div>');
        },

        setAction: function(){
            var selector = $(this.selector);
            selector.css({
                background: '#0000ff',
                position: 'absolute',
                width: 10,
                height: 10,
                top: 0
            }).delay(this.time).animate({
                left: this.x + 'px',
                top: '400px'
            } , 5000, 'easeOutBounce');
        }
    };

    var arrayBox = [];
    for( var i = 0; i < n; i++){
        arrayBox[i] = new Box(i,'.obj' + i, i*10, i*100);
    }

})(jQuery);

実際に動かすとこんな感じ。