1、效果图
2、此实例是在 http://yourgame.iteye.com/blog/477600 基础上进行改进并修改。
3、 js代码
- var image_window = new Ext.Window({
- id: 'image-window',
- title : '图片浏览',
- width : 750,
- height : 500,
- resizable : false,
- closeAction :'hide',
- layout:'border',
- items:[{
- xtype: 'panel',
- region: 'center',
- layout:'fit',
- bodyStyle : 'background-color:#E5E3DF;',
- frame:false,
- border:false,
- html :'<div id="mapPic"><div class="nav">'
- +'<div class="up" id="up"></div><div class="right" id="right"></div>'
- +'<div class="down" id="down"></div><div class="left" id="left"></div>'
- +'<div class="zoom" id="zoom"></div><div class="in" id="in"></div>'
- +'<div class="out" id="out"></div></div>'
- +'<img id="view-image" src="" border="0" style="cursor: url(images/openhand_8_8.cur), default;" > </div>'
- }],
- buttons: [{
- text: '取消',
- handler: function() {
- image_window.hide();
- }
- }],
- listeners: {
- 'show': function(c) {
- pageInit();
- }
- }
- });
- /**
- * 初始化
- */
- function pageInit(){
- var image = Ext.get('view-image');
- if(image!=null){
- Ext.get('view-image').on({
- 'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default;');},scope:image},
- 'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move;');},scope:image},
- 'dblclick':{fn:function(){
- zoom(image,true,1.2);
- }
- }});
- new Ext.dd.DD(image, 'pic');
- //image.center();//图片居中
- //获得原始尺寸
- image.osize = {
- width:image.getWidth(),
- height:image.getHeight()
- };
- Ext.get('up').on('click',function(){imageMove('up',image);}); //向上移动
- Ext.get('down').on('click',function(){imageMove('down',image);}); //向下移动
- Ext.get('left').on('click',function(){imageMove('left',image);}); //左移
- Ext.get('right').on('click',function(){imageMove('right',image);}); //右移动
- Ext.get('in').on('click',function(){zoom(image,true,1.5);}); //放大
- Ext.get('out').on('click',function(){zoom(image,false,1.5);}); //缩小
- Ext.get('zoom').on('click',function(){restore(image);}); //还原
- }
- };
- /**
- * 图片移动
- */
- function imageMove(direction, el) {
- el.move(direction, 50, true);
- }
- /**
- *
- * @param el 图片对象
- * @param type true放大,false缩小
- * @param offset 量
- */
- function zoom(el,type,offset){
- 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'
- );
- }
- /**
- * 图片还原
- */
- function restore(el) {
- var size = el.osize;
- //自定义回调函数
- function center(el,callback){
- el.center();
- callback(el);
- }
- el.fadeOut({callback:function(){
- el.setSize(size.width, size.height, {callback:function(){
- center(el,function(ee){//调用回调
- ee.fadeIn();
- });
- }});
- }
- });
- }
- var image_window = new Ext.Window({
- id: 'image-window',
- title : '图片浏览',
- width : 750,
- height : 500,
- resizable : false,
- closeAction :'hide',
- layout:'border',
- items:[{
- xtype: 'panel',
- region: 'center',
- layout:'fit',
- bodyStyle : 'background-color:#E5E3DF;',
- frame:false,
- border:false,
- html :'<div id="mapPic"><div class="nav">'
- +'<div class="up" id="up"></div><div class="right" id="right"></div>'
- +'<div class="down" id="down"></div><div class="left" id="left"></div>'
- +'<div class="zoom" id="zoom"></div><div class="in" id="in"></div>'
- +'<div class="out" id="out"></div></div>'
- +'<img id="view-image" src="" border="0" style="cursor: url(images/openhand_8_8.cur), default;" > </div>'
- }],
- buttons: [{
- text: '取消',
- handler: function() {
- image_window.hide();
- }
- }],
- listeners: {
- 'show': function(c) {
- pageInit();
- }
- }
- });
- /**
- * 初始化
- */
- function pageInit(){
- var image = Ext.get('view-image');
- if(image!=null){
- Ext.get('view-image').on({
- 'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default;');},scope:image},
- 'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move;');},scope:image},
- 'dblclick':{fn:function(){
- zoom(image,true,1.2);
- }
- }});
- new Ext.dd.DD(image, 'pic');
- //image.center();//图片居中
- //获得原始尺寸
- image.osize = {
- width:image.getWidth(),
- height:image.getHeight()
- };
- Ext.get('up').on('click',function(){imageMove('up',image);}); //向上移动
- Ext.get('down').on('click',function(){imageMove('down',image);}); //向下移动
- Ext.get('left').on('click',function(){imageMove('left',image);}); //左移
- Ext.get('right').on('click',function(){imageMove('right',image);}); //右移动
- Ext.get('in').on('click',function(){zoom(image,true,1.5);}); //放大
- Ext.get('out').on('click',function(){zoom(image,false,1.5);}); //缩小
- Ext.get('zoom').on('click',function(){restore(image);}); //还原
- }
- };
- /**
- * 图片移动
- */
- function imageMove(direction, el) {
- el.move(direction, 50, true);
- }
- /**
- *
- * @param el 图片对象
- * @param type true放大,false缩小
- * @param offset 量
- */
- function zoom(el,type,offset){
- 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'
- );
- }
- /**
- * 图片还原
- */
- function restore(el) {
- var size = el.osize;
- //自定义回调函数
- function center(el,callback){
- el.center();
- callback(el);
- }
- el.fadeOut({callback:function(){
- el.setSize(size.width, size.height, {callback:function(){
- center(el,function(ee){//调用回调
- ee.fadeIn();
- });
- }});
- }
- });
- }
4、调用该窗体js
- image_window.show();
- image_window.setTitle('图片预览-' + array[0].pigCode + '[' + picType + ']');
- Ext.get('view-image').dom.src = 'upload/' + array[0].picName;
说明:在程序的任意处可以直接调用该窗体,只需要将src指向图片地址。
5、用到的其他css及image可以从 地址:http://yourgame.iteye.com/blog/477600 下载