back to devpro   download
(function(round, window){
/** Liquid - Pure JavaScript Liquid Effect
 * @author          Andrea Giammarchi
 * @blog            webreflection.blogspot.com
 * @license         Mit Style License
 * @version         1.4 - less DOM, smaller, faster
 * @compatibility   all but Safari <= 2 and IE4
 */
function onload(config){
    function onload(){
        wrap.removeChild(img);
        img = $img = null;
        config.interval = 0;
        config.callee = config.pause = config.play = null;
        if(config.callback)
            config.callback(config)
        ;
    };
    var wrap    = config.target.appendChild(config.document.createElement("div")),
        div     = wrap.cloneNode(true),
        width   = this.width,
        height  = this.height,
        img     = this,
        $wrap   = wrap.style,
        $div    = div.style,
        $img    = img.style,
        scale   = config.scale || 2000,
        speed   = config.speed || 10,
        left, top, $
    ;
    margin($wrap, $div, $img);
    fontSize($wrap, $div);
    position($div, $img);
    $wrap.position = "relative";
    $wrap.width = width + "px";
    $wrap.height = height + "px";
    $wrap.overflow = "hidden";
    $img.zIndex = 1;
    $div.zIndex = 2;
    scale /= 100;
    switch(config.direction){
        case    "top":
            $div.height = 0 + "px";
            $div.width = width + "px";
            $img.top = (top = height) + "px";
            img.setAttribute("width", width);
            img.setAttribute("height", round(scale * height));
            left = 0;
            scale = speed / scale;
            config.interval = setTimeout(config.callee = function(){
                if(left < height){
                    top -= speed;
                    $img.top = round(top + left) + "px";
                    if(top < 0)
                        $div.height = round(left += scale) + "px"
                    ;
                    config.interval = setTimeout(config.callee, 15);
                } else
                    onload()
                ;
            }, 15);
            break;
        case    "bottom":
            $div.height = 0 + "px";
            $div.width = width + "px";
            $div.top = height + "px";
            $img.top = (top = -round(scale * height)) + "px";
            img.setAttribute("width", width);
            img.setAttribute("height", -top);
            width = -round(scale * height - height);
            left = 0;
            scale = speed / scale;
            config.interval = setTimeout(config.callee = function(){
                if(left < height){
                    top += speed;
                    $img.top = round(top - left) + "px";
                    if(width < top){
                        $div.height = ($ = round(left += scale)) + "px";
                        $div.top = (height - $) + "px";
                    };
                    config.interval = setTimeout(config.callee, 15);
                } else
                    onload()
                ;
            }, 15);
            break;
        case    "right":
            $div.width = 0 + "px";
            $div.left = width + "px";
            $div.height = height + "px";
            $img.left = (left = -round(scale * width)) + "px";
            img.setAttribute("width", -left);
            img.setAttribute("height", height);
            height = -round(scale * width - width);
            top = 0;
            scale = speed / scale;
            config.interval = setTimeout(config.callee = function(){
                if(top < width){
                    left += speed;
                    $img.left = round(left - top) + "px";
                    if(height < left){
                        $div.width = ($ = round(top += scale)) + "px";
                        $div.left = (width - $) + "px";
                    };
                    config.interval = setTimeout(config.callee, 15);
                } else
                    onload()
                ;
            }, 15);
            break;
        default:
            $div.width = 0 + "px";
            $img.top = "0px";
            $div.height = height + "px";
            $img.left = (left = width) + "px";
            img.setAttribute("width", round(scale * width));
            img.setAttribute("height", height);
            top = 0;
            scale = speed / scale;
            config.interval = setTimeout(config.callee = function(){
                if(top < width){
                    left -= speed;
                    $img.left = round(left + top) + "px";
                    if(left <= 0)
                        $div.width = round(top += scale) + "px"
                    ;
                    config.interval = setTimeout(config.callee, 15);
                } else
                    onload()
                ;
            }, 15);
            break;
    };
    $div.background = (config.background || "transparent") + " url(" + config.src + ") no-repeat " + (config.direction || "left");
    wrap.appendChild(img);
    wrap.appendChild(div);
};
function $onload(config){
    function onload(){
        wrap.parentNode.removeChild(wrap);
        wrap.removeChild(img);
        wrap.removeChild(div);
        wrap = div = img = $wrap = $div = $img = null;
        config.interval = 0;
        config.callee = config.pause = config.play = null;
        if(config.callback)
            config.callback(config)
        ;
    };
    var div     = config.target.getElementsByTagName("div"),
        wrap    = div[0],
        div     = div[1],
        img     = config.document.createElement("img"),
        $wrap   = wrap.style,
        $div    = div.style,
        $img    = img.style,
        width   = parseInt($wrap.width, 10),
        height  = parseInt($wrap.height, 10),
        scale   = config.scale || 2000,
        speed   = config.speed || 10,
        left, top, $
    ;
    position($img);
    margin($img);
    $img.zIndex = 1;
    $div.backgroundPosition = config.direction || "left";
    scale /= 100;
    img.onload = function(){
        switch(config.direction){
            case    "top":
                img.setAttribute("width", width);
                img.setAttribute("height", width = round(scale * height));
                $img.top = (top = -width + height) + "px";
                left = 0;
                scale = speed / scale;
                config.interval = setTimeout(config.callee = function(){
                    if(top + left < height){
                        top += speed;
                        $img.top = round(top + left) + "px";
                        if(-height < ($ = round(left -= scale)))
                            $div.height = (height + $) + "px"
                        ;
                        config.interval = setTimeout(config.callee, 15);
                    } else
                        onload()
                    ;
                }, 15);
                break;
            case    "bottom":
                img.setAttribute("width", width);
                img.setAttribute("height", width = round(scale * height));
                width += left = height;
                top = 0;
                scale = speed / scale;
                config.interval = setTimeout(config.callee = function(){
                    if(-top < width){
                        top -= speed;
                        $img.top = round(top + (height - left)) + "px";
                        $div.top = (height - ($ = round(left -= scale))) + "px";
                        if(0 < $)
                            $div.height = $ + "px"
                        ;
                        config.interval = setTimeout(config.callee, 15);
                    } else
                        onload()
                    ;
                }, 15);
                break;
            case    "right":
                img.setAttribute("height", height);
                img.setAttribute("width", height = round(scale * width));
                left = top = 0;
                scale = speed / scale;
                config.interval = setTimeout(config.callee = function(){
                    if(-left - top < height){
                        $img.left = round((left -= speed) + top) + "px";
                        if(($ = round(top += scale)) < width){
                            $div.width = (width - $) + "px";
                            $div.left = $ + "px";
                        };
                        config.interval = setTimeout(config.callee, 15);
                    } else
                        onload()
                    ;
                }, 15);
                break;
            default:
                img.setAttribute("height", height);
                img.setAttribute("width", left = round(scale * width));
                $img.left = (left = -(left - width)) + "px";
                top = 0;
                scale = speed / scale;
                config.interval = setTimeout(config.callee = function(){
                    if(left - top < width){
                        $img.left = round((left += speed) - top) + "px";
                        $ = round(top += scale);
                        if($ < width)
                            $div.width = (width - $) + "px"
                        ;
                        config.interval = setTimeout(config.callee, 15);
                    } else
                        onload()
                    ;
                }, 15);
                break;
        };
    };
    wrap.insertBefore(img, div);
    img.src = config.src;
};
function margin(){
    for(var i = 0, length = arguments.length; i < length; ++i)
        arguments[i].padding = arguments[i].margin = arguments[i].border = "0px"
    ;
};
function fontSize(){
    for(var i = 0, length = arguments.length; i < length; ++i){
        arguments[i].fontSize = arguments[i].lineHeight = "0px";
        arguments[i].textAlign = "left";
    };
};
function position(){
    for(var i = 0, length = arguments.length; i < length; ++i){
        arguments[i].top = arguments[i].left = "0px";
        arguments[i].position = "absolute";
    };
};
function Liquid(config){
    if(config.reverse)
        $onload(config)
    ; else {
        var img = (config.document || (config.document = document)).createElement("img");
        img.onload = function(){
            img.removeAttribute("onload");
            if(config.onload)
                config.onload(img)
            ;
            onload.call(img, config);
        };
        img.src = config.src;
        config.pause = function(){clearTimeout(config.interval)};
        config.play = function(){config.interval = setTimeout(config.callee, 15)};
    };
    return config;
};

window.Liquid = Liquid;

})(Math.round, window);
back to devpro   download
Creative Commons License