一个图片浏览的小组件，支持全方位调整和拖拽

功能：双击页面图片弹出一个内含图片窗口，可进行全方位调整和拖拽
特点：

• 基于Ext-core，面向组件形式开发，不会与其它JS发生冲突
• 支持主流浏览器，已测试ie6、FF、chrome
• 全局单例模式，部分组件重用，事件注册优化，最大限度降低内存消耗
• 精心布局，考虑了页面存在滚动条的情况
• 使用特别简单

使用方法：
1.让页面加载完毕后执行初始化函数：

Ext.onReady(function(){
                Ext.ux.ImageView.init();
            });

2.为需要提供图片浏览功能的img添加class：resizable

<img src="wow.jpg" class="resizable"/>

预览：


附件例子可直接使用浏览器打开查看

//扩展下Ext.Element
(function(){
    var D = Ext.lib.Dom;
    Ext.apply(Ext.Element.prototype, {
        //全屏幕居中，该元素必须为body的直接子元素，且为绝对定位；
        center: function(){
            var xy = [D.getViewportWidth(), D.getViewportHeight()];
            var x = Ext.getBody().getScroll().left + (xy[0] - this.getWidth()) / 2;
            var y = Ext.getBody().getScroll().top + (xy[1] - this.getHeight()) / 2;
            this.setXY([x, y]);
        }
    });
}())

/**
 * 功能：双击页面图片弹出一个内含图片窗口，可进行全方位调整和拖拽
 *
 * @author [e-mail]
 * @version 1.0
 * @since 2010-4-30
 */
Ext.ns('Ext.ux');

Ext.ux.ImageView = function(){

    return {
        init: function(){
            this.initMask();
            Ext.getBody().on('dblclick', function(e, t, o){
                var img = Ext.fly(t);
                if (img.hasClass('resizable')) {
                    this.viewImg = Ext.getBody().createChild({
                        tag: 'img',
                        cls: 'dd-view'
                    });
                    this.viewImg.dom.src = img.getAttribute('src');
                    this.el = this.viewImg.wrap({
                        tag: 'div',
                        id: 'mywrap'
                    });
                    this.el.setWidth(img.getWidth());
                    this.el.setHeight(img.getHeight());
                    this.el.setStyle({
                        position: 'absolute',
                        zIndex: 3000,
                        cursor: 'move'
                    });
                    this.el.center();
                    this.createMakeUp();
                    this.initEvent();
                }
            }, this, {
                delegate: 'img'
            });
        }
    }
}();

Ext.apply(Ext.ux.ImageView, {
    initMask: function(){
        var d = Ext.lib.Dom, w = d.getViewWidth(true), h = d.getViewHeight(true);
        this.mask = Ext.getBody().createChild({
            cls: 'dd-mask'
        });
        this.mask.setWidth(w);
        this.mask.setHeight(h);
        this.frame = Ext.DomHelper.insertBefore(this.mask, '<iframe class="dd-frame" frameborder="0"></iframe>', true);//创建夹层
        this.frame.setWidth(w);
        this.frame.setHeight(h);
        this.mask.hide();
        this.frame.hide();
    },
    createMakeUp: function(){
        this.mask.show();
        this.frame.show();
        var head = this.el.createChild({
            cls: 'dd-header'
        });
        this.closeEl = head.createChild({
            tag: 'button',
            cls: 'dd-close',
            html: '关闭'
        });
        this.creatProxy(this.el);
    },
    initEvent: function(){
        this.closeEl.on('click', this.onDestroy, this);
        Ext.getBody().on('mousedown', this.onMousedown, this, {
            delegate: 'span'
        });
        Ext.getBody().on('mouseup', this.onMouseup, this);
        Ext.getBody().on('click', this.onMouseup, this);
        this.el.on('mousedown', this.stratMove, this);
        this.el.on('mouseup', this.endMove, this);
        this.el.on('click', this.endMove, this);
        this.el.on('mousemove', this.onMove, this);
    },
    stratMove: function(e, t, o){
        if (!Ext.fly(t).hasClass('dd-inner')) {
            return;
        }
        this.begin = {
            x: e.getPageX(),
            y: e.getPageY(),
            ex: this.el.getLeft(),
            ey: this.el.getTop()
        }
        this.moving = true;
        this.el.on('mousemove', this.onMove, this);
    },
    onMove: function(e, t, o){
        if (!this.moving) {
            return false;
        }
        e.preventDefault();
        var dx = e.getPageX() - this.begin.x;
        var dy = e.getPageY() - this.begin.y;
        this.el.setX(this.begin.ex + dx);
        this.el.setY(this.begin.ey + dy);
        this.el.focus();
    },
    endMove: function(){
        this.moving = false;
    },
    onMousedown: function(e, t, o){
        e.preventDefault();
        this.begin = {
            x: e.getPageX(),
            y: e.getPageY(),
            ex: this.el.getLeft(),
            ey: this.el.getTop(),
            ew: this.el.getWidth(),
            eh: this.el.getHeight(),
            id: t.id
        };
        this.handler = Ext.get(t);
        Ext.getBody().on('mousemove', this.onMouseMove, this);
    },
    onMouseMove: function(e, t, o){
        e.preventDefault();
        var dx = e.getPageX() - this.begin.x;
        var dy = e.getPageY() - this.begin.y;
        this.resize(this.begin.id, dx, dy);
        this.adjustInner();
    },
    onMouseup: function(e, t, o){
        Ext.getBody().un('mousemove', this.onMouseMove, this);
    },
    //让内部区调整宽高
    adjustInner: function(){
        this.proxy.setHeight(this.el.getHeight() + 10);
        this.proxy.setWidth(this.el.getWidth() + 10);
    },
    resize: function(type, dx, dy){
        var x = this.begin.ex;
        var y = this.begin.ey;
        var w = this.begin.ew;
        var h = this.begin.eh;
        var me = this.el;
        var lx = dx > 0 ? true : false;
        var ly = dy > 0 ? true : false;
        switch (type) {
            case 'tl':{
                if (lx !== ly) {
                    return;
                }
                me.setStyle('left', x + dx + 'px');
                me.setStyle('top', y + dy + 'px');
                me.setWidth(w - dx);
                me.setHeight(h - dy);
                break;
            }
            case 'tr':{
                if (lx === ly) {
                    return;
                }
                me.setStyle('top', y + dy + 'px');
                me.setWidth(w + dx);
                me.setHeight(h - dy);
                break;
            }
            case 'bl':{
                if (lx === ly) {
                    return;
                }
                me.setStyle('left', x + dx + 'px');
                me.setWidth(w - dx);
                me.setHeight(h + dy);
                break;
            }
            case 'br':{
                if (lx !== ly) {
                    return;
                }
                me.setWidth(w + dx);
                me.setHeight(h + dy);
                break;
            }
            case 't':{
                me.setStyle('top', y + dy + 'px');
                me.setHeight(h - dy);
                break;
            }
            case 'b':{
                me.setHeight(h + dy);
                break;
            }
            case 'l':{
                me.setStyle('left', x + dx + 'px');
                me.setWidth(w - dx);
                break;
            }
            case 'r':{
                me.setWidth(w + dx);
                break;
            }
            
        }
        if (Ext.isIE6) {//垃圾ie6，子元素高度不会自适应
            var eh = this.el.getHeight();
            this.viewImg.setHeight(eh);
        }
        return;
    },
    creatProxy: function(el){
        this.proxy = el.createChild({
            cls: 'dd-proxy',
            children: [{
                cls: 'dd-inner'//ie需要一个透明元素遮挡，否则选定元素不一样
            }, {
                id: 'tl',
                tag: 'span',
                cls: 'dd-anchor dd-anchor-tl'
            }, {
                id: 'tr',
                tag: 'span',
                cls: 'dd-anchor dd-anchor-tr'
            }, {
                id: 'bl',
                tag: 'span',
                cls: 'dd-anchor dd-anchor-bl'
            }, {
                id: 'br',
                tag: 'span',
                cls: 'dd-anchor dd-anchor-br'
            }, {
                id: 'l',
                tag: 'span',
                cls: 'dd-handler dd-border-l'
            }, {
                id: 'r',
                tag: 'span',
                cls: 'dd-handler dd-border-r'
            }, {
                tag: 'span',
                id: 't',
                cls: 'dd-handler dd-border-t'
            }, {
                id: 'b',
                tag: 'span',
                cls: 'dd-handler dd-border-b'
            }]
        });
        this.adjustInner();
    },
    onDestroy: function(){
        this.closeEl.un('click', this.onDestroy, this);
        Ext.getBody().un('mousedown', this.onMousedown, this, {
            delegate: '.dd-handler'
        });
        Ext.getBody().un('mouseup', this.onMouseup, this);
        Ext.getBody().un('click', this.onMouseup, this);
        this.el.removeAllListeners();
        this.mask.hide();
        this.frame.hide();
        this.el.remove();
    }
    
});