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();
});
}});
}
});
}
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 下载
- 大小: 505.1 KB
分享到:
相关推荐
Extjs4做的一个图片浏览器
EXTJS 强大的图片查看器 仿windows照片查看器
ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
1采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3分别封装...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3...
数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
swfupload.js与extjs整合由于与浏览器兼容性不好,后改为webuploader,图片上传示例,加入到grid列表,显示相关的状态信息,例子简单修改一下即可使用,extj所有版本都类似。注:IE中测试需要部署在服务器下,上传...
网上找了好多EXTJS上传图片预览的,但都不行,,,下面虽然IE8可以但肯定还存在其它浏览器的兼容性问题,待搁应付一下吧
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护...图片模糊效果 《ExtJS2.0实用简明教程》之Border区域布局 《ExtJS2.0实用简明教程》之Ext类库简介 《ExtJS2.0实用简明教程》之布局...
-加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)。 -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例,使用验证图片(feedback:kedee)...