extjs图片放大缩小实现

zhangjiankun880

鼠标前后滚动实现图片的放大和缩小预览。继承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>