imagePreview.js源碼：
afterRender : function() {
ImgView.superclass.afterRender.call(this);
Ext.get(this.img_view_id).parent = this;
Ext.get(this.img_view_id).center();
new Ext.dd.DD(Ext.get(this.img_view_id), 'pic');
Ext.get(this.img_view_id).dom.title = '鼠標滾輪控制圖片的放大和縮小';
Ext.get(this.img_view_id).on({
'dblclick' : {
fn : function() {
Ext.get(this).parent.zoom(Ext.get(this), 1.5, true);
}
},
'mousewheel' : {
fn : function(e) {
var delta = e.getWheelDelta();
if (delta > 0) {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
true);
} else {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
false);
}
}
}
});
},
/**
* 圖片放大和縮小
*
* @param {}
* el 壹個dom對象
* @param {}
* offset 放大或者縮小的偏移量
* @param {}
* type true為放大，false為縮小
*/
zoom : function(el, offset, type) {
var width = el.getWidth();
var height = el.getHeight();
var nwidth = type ? (width * offset) : (width / offset);
var nheight = type ? (height * offset) : (height / offset);
var left = type ? -((nwidth - width) / 2) : ((width - nwidth) / 2);
var top = type ? -((nheight - height) / 2) : ((height - nheight) / 2);
el.animate({
height : {
to : nheight,
from : height
},
width : {
to : nwidth,
from : width
},
left : {
by : left
},
top : {
by : top
}
}, null, null, 'backBoth', 'motion');
}
});
使用該類進行調用擴大和縮小：
image.js：
Ext.onReady(function() {
var img1 = new ImgView({
src : ['images/preview/001.jpg',
"images/preview/002.jpg",
'images/preview/003.jpg',
"images/preview/004.jpg",
'images/preview/005.jpg',
"images/preview/006.jpg",
'images/preview/007.jpg',
"images/preview/008.jpg"],
title : '圖片瀏覽'
});
// alert(img1.img_index);
var main_panel = new Ext.Panel({
title : '圖片預覽',
el : 'main_panel',
autoHeight : true,
bodyBorder : false,
collapsible : true,
renderTo : Ext.getBody(),
items : [img1]
});
});