extjs3.3.0图片放大缩小实现
extjs3.3.0图片放大缩小实现
鼠标前后滚动实现图片的放大和缩小预览。
继承ext.panel实现自己的图片预览类imagePreview:
imagePreview.js
/**
* 继承Panel组件，用于图像预览
*
* @author centre
* @class ImgView
* @extends Ext.Panel
*/
ImgView = Ext.extend(Ext.Panel, {
height : 540,
width : 500,
cls : "background:blue;",
img_index : 0,
img_view_id : this.id + '_img',
/**
* 设置显示图像的偏移量，根据传入的参数选择应该显示的图片的id
*
* @author centre
* @param {}
* offset 偏移量为整数
*/
setImg : function(offset) {
if (offset == 1 && Ext.getCmp(this.id + '_next_btn').disabled != true) {
this.img_index = this.img_index + offset;
}
if (offset == -1 && Ext.getCmp(this.id + '_pre_btn').disabled != true) {
this.img_index = this.img_index + offset;
}
if (this.img_index <= 0) {
Ext.get(this.img_view_id).dom.src = this.src[0];
// this.img_index =this.src.length-1;
} else if (this.img_index >= this.src.length) {
Ext.get(this.img_view_id).dom.src = this.src[this.src.length - 1];
// this.img_index = 0;
} else {
Ext.get(this.img_view_id).dom.src = this.src[this.img_index];
}
Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index) == this.src.length)
? true
: false;
Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index) <= 0)
? true
: false;
// this.img_index = this.img_index + offset;
},
/**
* 构造函数，根据传入的json对象初始化组件，新增了一个src的配置参数
*
* @author centre
*/
initComponent : function() {
var cmp = this;
var length = this.src.length;
this.html = '<img id=\'' + this.img_view_id + '\' src=\'' + this.src[0]
+ '\' ></img>';
this.bbar = [{
text : "上一张",
id : this.id + '_pre_btn',
handler : function(e, b) {
cmp.setImg(-1);
}
}, {
text : "下一张",
id : this.id + '_next_btn',
handler : function(e, b) {
cmp.setImg(1);
}
}];
ImgView.superclass.initComponent.call(this);
},
/**
* ImageView渲染后，通过监听图片上的鼠标滚轮事件将图片放大或者缩小
*
* @author centre
* @return null
*/
afterRender : function() {
ImgView.superclass.afterRender.call(this);
Ext.get(this.img_view_id).parent = this;
Ext.get(this.img_view_id).center();
new Ext.dd.DD(Ext.get(this.img_view_id), 'pic');
Ext.get(this.img_view_id).dom.title = '鼠标滚轮控制图片的放大和缩小';
Ext.get(this.img_view_id).on({
'dblclick' : {
fn : function() {
Ext.get(this).parent.zoom(Ext.get(this), 1.5, true);
}
},
'mousewheel' : {
fn : function(e) {
var delta = e.getWheelDelta();
if (delta > 0) {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
true);
} else {
Ext.get(this).parent.zoom(Ext.get(this), 1.5,
false);
}
}
}
});
},
/**
* 图片放大和缩小
*
* @param {}
* el 一个dom对象
* @param {}
* offset 放大或者缩小的偏移量
* @param {}
* type true为放大，false为缩小
*/
zoom : function(el, offset, type) {
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');
}
});
使用该类：
image.js：
Ext.onReady(function() {
var img1 = new ImgView({
src : ['images/preview/001.jpg',
"images/preview/002.jpg",
'images/preview/003.jpg',
"images/preview/004.jpg",
'images/preview/005.jpg',
"images/preview/006.jpg",
'images/preview/007.jpg',
"images/preview/008.jpg"],
title : '图片浏览'
});
// alert(img1.img_index);
var main_panel = new Ext.Panel({
title : '图片预览',
el : 'main_panel',
autoHeight : true,
bodyBorder : false,
collapsible : true,
renderTo : Ext.getBody(),
items : [img1]
});
});
jsp页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>hikvisionxxx</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="csslib/index.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<script type="text/javascript" src="jslib/imagePreview.js">
</script>
<script type="text/javascript" src="jslib/image.js">
</script>
</head>
<body>
<div id="main_panel"></div>
</body>
</html>