您的位置：首页 → 技术开发 → JAVA Script → 教你用JavaScript写一个Ext

教你用JavaScript写一个Ext

时间：2009/11/3 12:13:00来源：本站整理作者：我要评论(1)



 

Js代码 复制代码
  1. Ext.onReady(function() {   
  2.     Ext.QuickTips.init();   
  3.   
  4.     Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';   
  5.   
  6.     new Ext.Window({   
  7.         title : '图片显示',   
  8.         width : 750,   
  9.         height : 500,   
  10.         bodyStyle : 'background-color:#E5E3DF;',   
  11.         resizable : false,   
  12.         contentEl : 'mapPic'  
  13.     }).show();   
  14.        
  15.     /**  
  16.      * 初始化  
  17.      */  
  18.     function pageInit(){   
  19.         var image = Ext.get('image');   
  20.        
  21.         Ext.get('image').on({   
  22.             'mousedown':{fn:function(){this.setStyle('cursor','url(images/closedhand_8_8.cur),default;');},scope:image},   
  23.             'mouseup':{fn:function(){this.setStyle('cursor','url(images/openhand_8_8.cur),move;');},scope:image},   
  24.             'dblclick':{fn:function(){   
  25.                 zoom(image,true,1.2);   
  26.             }   
  27.         }});   
  28.         new Ext.dd.DD(image, 'pic');   
  29.            
  30.         image.center();//图片居中   
  31.            
  32.         //获得原始尺寸   
  33.         image.osize = {   
  34.             width:image.getWidth(),   
  35.             height:image.getHeight()   
  36.         };   
  37.        
  38.         Ext.get('up').on('click',function(){imageMove('up',image);});       //向上移动   
  39.         Ext.get('down').on('click',function(){imageMove('down',image);});   //向下移动   
  40.         Ext.get('left').on('click',function(){imageMove('left',image);});   //左移   
  41.         Ext.get('right').on('click',function(){imageMove('right',image);}); //右移动   
  42.         Ext.get('in').on('click',function(){zoom(image,true,1.5);});        //放大   
  43.         Ext.get('out').on('click',function(){zoom(image,false,1.5);});      //缩小   
  44.         Ext.get('zoom').on('click',function(){restore(image);});            //还原   
  45.     };   
  46.        
  47.     pageInit();   
  48.        
  49.     /**  
  50.      * 图片移动  
  51.      */  
  52.     function imageMove(direction, el) {   
  53.         el.move(direction, 50, true);   
  54.     }   
  55.        
  56.        
  57.     /**  
  58.      *   
  59.      * @param el 图片对象  
  60.      * @param type true放大,false缩小  
  61.      * @param offset 量  
  62.      */  
  63.     function zoom(el,type,offset){   
  64.         var width = el.getWidth();   
  65.         var height = el.getHeight();   
  66.         var nwidth = type ? (width * offset) : (width / offset);   
  67.         var nheight = type ? (height * offset) : (height / offset);   
  68.         var left = type ? -((nwidth - width) / 2):((width - nwidth) / 2);   
  69.         var top =  type ? -((nheight - height) / 2):((height - nheight) / 2);    
  70.         el.animate(   
  71.             {   
  72.                 height: {to: nheight, from: height},   
  73.                 width: {to: nwidth, from: width},   
  74.                 left: {by:left},   
  75.                 top: {by:top}   
  76.             },   
  77.             null,         
  78.             null,        
  79.             'backBoth',   
  80.             'motion'  
  81.         );   
  82.     }   
  83.   
  84.   
  85.     /**  
  86.      * 图片还原  
  87.      */  
  88.     function restore(el) {   
  89.         var size = el.osize;   
  90.            
  91.         //自定义回调函数   
  92.         function center(el,callback){   
  93.             el.center();   
  94.             callback(el);   
  95.         }   
  96.         el.fadeOut({callback:function(){   
  97.             el.setSize(size.width, size.height, {callback:function(){   
  98.                 center(el,function(ee){//调用回调   
  99.                     ee.fadeIn();   
  100.                 });   
  101.             }});   
  102.         }   
  103.         });   
  104.   
  105.     }   
  106. });  
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();
				});
			}});
		}
		});

	}
});




 

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>图片缩放浏览</title>  
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  6.         <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">  
  7.         <link rel="stylesheet" type="text/css" href="css/main.css">  
  8.         <script type="text/javascript" src="js/ext-base.js"></script>  
  9.         <script type="text/javascript" src="js/ext-all-debug.js"></script>  
  10.         <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>  
  11.         <script type="text/javascript" src="js/main.js"></script>  
  12.     </head>  
  13.     <body oncontextmenu="return false">  
  14.         <div id="mapPic">  
  15.             <div class="nav">  
  16.                 <div class="up" id="up"></div>  
  17.                 <div class="right" id="right"></div>  
  18.                 <div class="down" id="down"></div>  
  19.                 <div class="left" id="left"></div>  
  20.                 <div class="zoom" id="zoom"></div>  
  21.                 <div class="in" id="in"></div>  
  22.                 <div class="out" id="out"></div>  
  23.             </div>  
  24.             <img id='image' src='images/girl.jpg' border='0' style="cursor: url(images/openhand_8_8.cur), default;" >  
  25.         </div>  
  26.     </body>  
  27. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>图片缩放浏览</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script type="text/javascript" src="js/ext-base.js"></script>
		<script type="text/javascript" src="js/ext-all-debug.js"></script>
		<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body oncontextmenu="return false">
		<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='image' src='images/girl.jpg' border='0' style="cursor: url(images/openhand_8_8.cur), default;" >
		</div>
	</body>
</html>

相关视频

    没有数据

相关阅读 asp下面javascript上传图片限制格式大小方法jQuery和JavaScript 库的性能对比在JavaScript中yield实用简洁实现方式JavaScript库开发者们的规则JavaScript和CSS 属性功能javascript去除字符串中出现空格的函数javascript模式对话框属性介绍JavaScript学习和使用经验总结

文章评论
发表评论

热门文章 JS文件中的中文在网页

最新文章 JS文件中的中文在网页关于一些Play 1.0.1资 JAVA中抽象类与接口的区别Java技巧：关于Cookie的操作JAVA AWT图形用户界面设计巧用Java将Word转换为Html网页文件

人气排行 JS文件中的中文在网页上显示为乱码解决方法怎么为Java程序添加漂亮背景图片代码JAVA AWT图形用户界面设计怎样获取java线程中信息JS简介及特点Java面向对象编程学习总结js鼠标滑过切换层效果代码下载教你java使用回调和线程处理响应全过程