extjs图片放大缩小实现
鼠标前后滚动实现图片的放大和缩小预览。继承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; // 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.img_index = 0; } else { Ext.get(this.img_view_id).dom.src = this.src; } 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 + '\' ></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 : }); });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>
页:
[1]