ExtJS 3.0 图片浏览程序

核心提示：图片浏览程序,可以上下左右移动,也可以用鼠标随意拖动,放大(双击或点加号图片),缩小,复原等. 图片看不清楚？请点击这里查看原图（大图），图片看不清楚？请点击这里查看原图（大图），ExtJS 3.0 图片浏览程序，图片看不清楚？请点击这里查看原图（大图），Js代码Ext.onReady(function(){Ext.Q

图片浏览程序,可以上下左右移动,也可以用鼠标随意拖动,放大(双击或点加号图片),缩小,复原等.

图片看不清楚？请点击这里查看原图（大图）。　

图片看不清楚？请点击这里查看原图（大图）。　

图片看不清楚？请点击这里查看原图（大图）。　

Js代码　

Ext.onReady(function()　{　
　Ext.QuickTips.init();　
　
　Ext.BLANK_IMAGE_URL　=　'resources/images/default/s.gif';　
　
　new　Ext.Window({　
　title　:　'图片显示',　
　width　:　750,　
　height　:　500,　
　bodyStyle　:　'background-color:#E5E3DF;',　
　resizable　:　false,　
　contentEl　:　'mapPic'　
　}).show();　
　
　/**　
　*　初始化　
　*/　
　function　pageInit(){　
　var　image　=　Ext.get('image');　
　
　Ext.get('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);});　　//还原　
　};　
　
　pageInit();　
　
　/**　
　*　图片移动　
　*/　
　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();　
　　});　
　　}});　
　}　
　});　
　
　}　
});