Happy Programming

カーソルキーやスペースキーもきくしドラッグしたりも出来る

ソースは以下のような感じ

(function($) {
    $.fn.escalates = function(step) {
        var srcelems = this;
        var targetelems = [];
        var move = function(to, fp, tp, callback) {
            
            var diffWidth = tp.width - fp.width;
            var diffHeight = tp.height - fp.height;
            var diffLeft = tp.left - fp.left;
            var diffTop = tp.top - fp.top;
            
            var stepWidth = diffWidth / step;
            var stepHeight = diffHeight / step;
            var stepLeft = diffLeft / step;
            var stepTop = diffTop / step;
            
            to.css({
                top: fp.top,
                left: fp.left,
                width: fp.width,
                height: fp.height,
                visibility: 'visible'
            });
            
            var i = 0;
            setTimeout(function() {
                i++;
                fp.left += stepLeft;
                fp.top += stepTop;
                fp.width += stepWidth;
                fp.height += stepHeight;
                                    
                to.css({
                    top: fp.top,
                    left: fp.left,
                    width: fp.width,
                    height: fp.height
                });
                if (i < step) setTimeout(arguments.callee, 15);
                else {
                    to.css({
                        top: tp.top,
                        left: tp.left,
                        width: tp.width,
                        height: tp.height
                    });
                    callback();
                }
            }, 15);
        };
        
        var drag = function(handle, dragelem) {
            handle.mousedown(function(event) {
                handle.stoped = true;
                event.preventDefault();
                event.stopPropagation();
                handle.last = $(document.body).children()[$(document.body).children().length - 1] == dragelem[0];
                if (!handle.last) dragelem.parent().append(dragelem);
                var dx = parseInt(dragelem.css('left')) - event.pageX;
                var dy = parseInt(dragelem.css('top')) - event.pageY;
                $(document).mousemove(function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    handle.stoped = false;
                    dragelem.css({
                        left: (event.pageX + dx),
                        top: (event.pageY + dy)
                    });
                });
                $(document).mouseup(function(event) {
                    $(document).unbind('mousemove');
                });
            });
        };
        
        return this.each(function(idx, srcelem){
            targetelems.push($('<img class="larger">'));
            var f = function(event) {
                var timg, simg;
                if (event.type == 'keydown') {
                    if ($(document.body).children()[$(document.body).children().length - 1] != targetelems[idx].parent()[0]) return;
                    var k = event.keyCode;
                    if (k == 39 || k == 37 || k == 32) {
                        event.preventDefault();
                        event.stopPropagation();
                        fp = {
                            width: targetelems[idx].width(),
                            height: targetelems[idx].height(),
                            top: targetelems[idx].offset().top,
                            left: targetelems[idx].offset().left
                        };
                        tp = {
                            width: srcelems.eq(idx).width(),
                            height: srcelems.eq(idx).height(),
                            top: srcelems.eq(idx).offset().top,
                            left: srcelems.eq(idx).offset().left
                        };
                        targetelems[idx].parent().remove();
                        targetelems[idx].appendTo($(document.body));
                        move(targetelems[idx], fp, tp, function(){targetelems[idx].remove().removeAttr('style');srcelems.eq(idx).css({visibility: 'visible'});});
                        if (event.keyCode == 39) {
                            timg = targetelems.length - 1 == idx? targetelems[0]: targetelems[idx + 1];
                            simg = srcelems.length - 1 == idx? srcelems[0]: srcelems[idx + 1];
                        } else if (event.keyCode == 37) {
                            timg = 0 == idx? targetelems[targetelems.length - 1]: targetelems[idx - 1];
                            simg = 0 == idx? srcelems[srcelems.length - 1]: srcelems[idx - 1];
                        } else return;
                    } else return;
                } else {
                    timg = targetelems[idx];
                    simg = srcelems[idx];                    
                }
                if (timg.parent()[0]) timg.parent().remove();

                timg.attr('src', simg.src.replace('small', 'large')).css({position: 'absolute', visibility: 'hidden', top: 0, left: 0}).appendTo($(document.body));

                var f = function() {
                    $(simg).css({visibility: 'hidden'});
                    var fp = {
                        width: $(simg).width(),
                        height: $(simg).height(),
                        top: $(simg).offset().top,
                        left: $(simg).offset().left
                    };
                    var tp = {
                        width: timg.width(),
                        height: timg.height(),
                        top: ($(window).height() - timg.height() - (parseInt(timg.css('padding-top')) * 2)) / 2 + $(window).scrollTop(),
                        left: ($(window).width() - timg.width() - (parseInt(timg.css('padding-left')) * 2)) / 2 + $(window).scrollLeft()
                    };
                    move(timg, fp, tp, function() {
                        timg.shadow(timg.outerWidth(), timg.outerHeight(), tp.top, tp.left, -8, '/happy_programming/images/');
                        drag(timg, timg.parent());
                        timg.click(function(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            if (timg.last && timg.stoped) {
                                var fp = {
                                    width: timg.width(),
                                    height: timg.height(),
                                    top: timg.offset().top,
                                    left: timg.offset().left
                                };
                                var tp = {
                                    width: $(simg).width(),
                                    height: $(simg).height(),
                                    top: $(simg).offset().top,
                                    left: $(simg).offset().left
                                };
                                timg.parent().remove();
                                timg.appendTo($(document.body));
                                move(timg, fp, tp, function(){timg.remove().removeAttr('style');$(simg).css({visibility: 'visible'});});
                            }
                        });
                    });
                };
                if (timg[0].complete) f();
                else timg.load(function(event) {f();});
            };
            $(srcelem).click(f);
            $(document).keydown(f);
        });
    };
})(jQuery);

jQueryおもしろいなあ