css sprite demo

by queryj

HTML

<div id="draw-target">
</div>

CSS

#draw-target{
    width:480px;
    height:320px;
    background-color:#ccf;
    position:relative;
}

JavaScript

var DHTMLSprite = function(params) {
    var width = params.width,
        height = params.height,
        imagesWidth = params.imageWidth,
        $element = params.$drawTarget.append("<div/>").find(":last"),
        elemStyle = $element[0].style,
        mathFloor = Math.floor;

    $element.css({
        position: "absolute",
        width: width,
        height: height,
        backgroundImage: "url(" + params.images + ")"
    });
    var that = {
        draw: function(x, y) {
            elemStyle.left = x + "px";
            elemStyle.top = y + "px";
        },
        changeImage: function(index) {
            index *= width;
            var vOffset = -mathFloor(index / imagesWidth) * height;
            var hOffset = -index % imagesWidth;
            elemStyle.backgroundPosition = hOffset + "px " + vOffset + "px";
        },
        show: function() {
            elemStyle.display = "block";
        },
        hide: function() {
            elemStyle.display = "none";
        },
        destory: function() {
            $element.remove();
        }
    };
    return that;
};

var params = {
    images: "http://29.media.tumblr.com/tumblr_lp0bqy9zO91qbmzy5o1_400.png",
    imageWidth: 256,
    width: 64,
    height: 64,
    $drawTarget: $("#draw-target")
};


var sprite1 = DHTMLSprite(params),
    sprite2 = DHTMLSprite(params);

sprite2.changeImage(5);

sprite1.draw(64,64);
sprite2.draw(352, 192);