Index: ssts-web/src/main/webapp/imageShow/imageShow.jsp =================================================================== diff -u --- ssts-web/src/main/webapp/imageShow/imageShow.jsp (revision 0) +++ ssts-web/src/main/webapp/imageShow/imageShow.jsp (revision 12604) @@ -0,0 +1,43 @@ +<%@ page contentType="text/html; charset=UTF-8"%> +<%@ include file="/common/taglibs.jsp"%> + + +<%-- <%@ include file="/common/includeExtJsAndCss.jsp"%> --%> + + + + + + + + + \ No newline at end of file Index: ssts-web/src/main/webapp/imageShow/imageShow.js =================================================================== diff -u --- ssts-web/src/main/webapp/imageShow/imageShow.js (revision 0) +++ ssts-web/src/main/webapp/imageShow/imageShow.js (revision 12604) @@ -0,0 +1,199 @@ +var scale = 1.2;//每次缩放比例 +var currentScalePercent = 100;//当前缩放百分比 +var winWidth = 700; +var winHeight = 420; +var currentImageWidth = 0; +var currentImageId;//当前image对象id +var ImgView; +Ext.onReady(function() { + //屏蔽右击事件 + window.oncontextmenu = function (){ + window.event.returnValue=false;//针对chrome可行,IE不可行 + } + ImgView = Ext.extend(Ext.Panel, { + height: winHeight, + border:false, + img_index: 0, + img_view_id: this.id + '_img', + align:'center', + + set_img: function(offset) { + Ext.get(this.img_view_id).dom.src = this.src[this.img_index + offset]; + Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index + offset) == this.src.length - 1) ? true : false; + Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index + offset) == 0) ? true : false; + this.img_index = this.img_index + offset; + }, + initComponent: function(){ + currentImageId = this.img_view_id; + var cmp = this; + this.html='

$\'滚动鼠标放大缩小\'$

'; + + /*this.tbar = [ + {text:"上一张", id: this.id + '_pre_btn', handler: function(){ + + cmp.set_img(-1); + }}, + {text:"下一张", id: this.id + '_next_btn', handler: function(){ + cmp.set_img(1); + } + }];*/ + + ImgView.superclass.initComponent.call(this); + }, + 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), scale,true); + + currentScalePercent = currentScalePercent * scale; + //Ext.Toast.show(Math.round(currentScalePercent) + '%',Ext.Toast.ShortTime); + }}, + 'contextmenu': {fn: function(){ + Ext.get(this).parent.zoom(Ext.get(this), scale,false); + + currentScalePercent = currentScalePercent / scale; + //Ext.Toast.show(Math.round(currentScalePercent) + '%',Ext.Toast.ShortTime); + }} + }); + + }, + //放大、缩小 + 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); + try{ + el.animate( + { + height: {to: nheight, from: height}, + width: {to: nwidth, from: width}, + left: {by:left}, + top: {by:top} + }, + null, + null, + 'backBoth', + 'motion' + ); + }catch(e){ + //alert(e.msg); + } + currentImageWidth = nwidth; + } + }); + + var scrollFunc = function (e) { + try{ + var direct = 0; + var type; + e = e || window.event; + //e.wheelDelta:判断浏览器IE，谷歌滑轮事件 e.detail:Firefox滑轮事件当滑轮向上滚动时 + if((e.wheelDelta && e.wheelDelta > 0) || (e.detail && e.detail > 0)){ + type = true; + }else if((e.wheelDelta && e.wheelDelta < 0) || (e.detail && e.detail < 0)){ + type = false; + } + + /*if(type == true && (currentImageWidth >= winWidth * 0.95 || currentScalePercent >= 177)){ + Ext.Toast.show('图片已放至最大',Ext.Toast.MiddleTime); + return; + }else if(type == false && currentScalePercent <= 10){ + Ext.Toast.show('图片已放至最小',Ext.Toast.MiddleTime); + return; + }*/ + if(Ext.isIE){ + Ext.get(e.srcElement).parent.zoom(Ext.get(e.srcElement), scale,type); + }else{ + Ext.get(e.target).parent.zoom(Ext.get(e.target), scale,type); + } + + //type为true表示放大,false为缩小 + if(type){ + currentScalePercent = currentScalePercent * scale; + }else{ + currentScalePercent = currentScalePercent / scale; + } + + //Ext.Toast.show(Math.round(currentScalePercent) + '%',Ext.Toast.ShortTime); + //ScrollText(direct); + }catch (e) { + // TODO: handle exception + } + } + //给页面绑定滑轮滚动事件 + if (document.addEventListener) { + document.addEventListener('DOMMouseScroll', scrollFunc, false); + } + //注册滚动滑轮触发scrollFunc方法 + window.onmousewheel = document.onmousewheel = scrollFunc; + + //ext 吐丝提示 + Ext.Toast = function() { }; Ext.Toast.LongTime = 4000; Ext.Toast.MiddleTime = 1000; Ext.Toast.ShortTime = 100; Ext.Toast.show = function(msgText, time) { Ext.MessageBox.show({ msg : msgText, closable : false }); setTimeout(function() { Ext.MessageBox.hide(); }, time); }; +}); + +var showImage = function(url){ + currentScalePercent = 100;//当前缩放百分比 + //示例数据(传多张图可实现前后翻页浏览) + /*var img1 = new ImgView({ + src: ['/test/test2.jpg','/test/test2.jpg','/test/test3.jpg','/test/test4.jpg'] + , title: '图片浏览' + });*/ + + var img1 = new ImgView({ + src: [url] + }); + var main_panel = new Ext.Panel({ + //title: 'main_panel', + //el: 'main_panel', + width:winWidth, + height:winHeight, + border:false, + //bodyStyle : 'background:#eee;', +// autoHeight: true, +// bodyBorder: false, +// collapsible: true, + renderTo: Ext.getBody(), + items: [img1] + }); + + var imageWin = new Ext.Window({ + id : 'imageWin', +// layout : 'fit', + width : winWidth, + border : false, + modal : true, + height : winHeight, +// plain : true, + items : [main_panel], + listeners:{ + 'click':function(){ + this.close();//没有起效果 + } + }, + buttonAlign:'center', + buttons : [{ + text:'放大', + handler:function(){ + Ext.get(currentImageId).parent.zoom(Ext.get(currentImageId), scale,true); + } + },{ + text:'缩小', + handler:function(){ + Ext.get(currentImageId).parent.zoom(Ext.get(currentImageId), scale,false); + } + }/*,{ + text:'顺转' + },{ + text:'逆转' + }*/] + }); + imageWin.show(); +} \ No newline at end of file