开发学院软件开发Java ExtJS 3.0 图片浏览程序 阅读

ExtJS 3.0 图片浏览程序

 2009-09-26 00:00:00 来源:WEB开发网   
核心提示:图片浏览程序,可以上下左右移动,也可以用鼠标随意拖动,放大(双击或点加号图片),缩小,复原等. 图片看不清楚?请点击这里查看原图(大图),图片看不清楚?请点击这里查看原图(大图),ExtJS 3.0 图片浏览程序,图片看不清楚?请点击这里查看原图(大图),Js代码Ext.onReady(function(){Ext.Q

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

ExtJS 3.0 图片浏览程序

图片看不清楚?请点击这里查看原图(大图)。 

ExtJS 3.0 图片浏览程序

图片看不清楚?请点击这里查看原图(大图)。 

ExtJS 3.0 图片浏览程序

图片看不清楚?请点击这里查看原图(大图)。 

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(); 
  }); 
  }}); 
 } 
 }); 
 
 } 
}); 

1 2  下一页

Tags:ExtJS 图片 浏览

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读