zoom插件实现图片放大缩小功能

不多说，上代码

js代码

<script src="app/js/zoom/js/e-smart-zoom-jquery.min.js"></script><script>    $(document).ready(function() {    var imgv = $('<img id="imageFullScreen" src="rest/receiveStuff/queryImg?num='+parseInt(1000*Math.random())+'&type=sjzl&fileName=/'+surveycaselsh+'/'+img.name +'" />')    $('#imgContainer').append(imgv);        $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});                $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);        $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);                function zoomButtonClickHandler(e){            var scaleToAdd = 0.8;            if(e.target.id == 'zoomOutButton')                scaleToAdd = -scaleToAdd;            $('#imageFullScreen').smartZoom('zoom', scaleToAdd);        }                function moveButtonClickHandler(e){            var pixelsToMoveOnX = 0;            var pixelsToMoveOnY = 0;                switch(e.target.id){                case "leftPositionMap":                    pixelsToMoveOnX = 50;                break;                case "rightPositionMap":                    pixelsToMoveOnX = -50;                break;                case "topPositionMap":                    pixelsToMoveOnY = 50;                break;                case "bottomPositionMap":                    pixelsToMoveOnY = -50;                break;            }            $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);        }     });</script>

html页面代码

<div id="str" style="height:500px"><div id="pageContent" style="width:8%;height:500px;float:left;padding:0 0 0 0;background:#556B2F"><div id="positionButtonDiv"><p><span>   <img id="zoomInButton" class="zoomButton" src="app/js/zoom/assets/zoomIn.png" title="zoom in" alt="zoom in" />   <img id="zoomOutButton" class="zoomButton" src="app/js/zoom/assets/ZoomOut.png" title="zoom out" alt="zoom out" /></span> </p><p><span class="positionButtonSpan"><map name="positionMap" class="positionMapClass"><area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/><area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/><area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/><area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/></map> <img src="app/js/zoom/assets/position.png" usemap="#positionMap" /> </span> </p></div></div><div id="imgContainer" style="width:92%;height:100%;float:left"> <!-- <img id="imageFullScreen" src="f"/> --> </div></div>

在上面的js代码中，可以放置项目本身图片，也可以放置远程图片，从远程读入图片的代码和下载图片，以及从服务器本地与项目本地读取图片是同一个性质，都是通过流传输然后对文件进行处理

var imgv = $('<img id="imageFullScreen" src="rest/receiveStuff/queryImg?num='+parseInt(1000*Math.random())+'&type=sjzl&fileName=/'+surveycaselsh+'/'+img.name +'" />')

这段话放置了远程调用图片的url

controller层代码：同下载

@RequestMapping("/queryImg")@ResponseBodypublic Map<String,Object> queryImg(String type,String fileName,HttpServletResponse response){OutputStream out = null;InputStream input = null;try{    URL url = new URL(ftputil.getFtpPath(new Ftp(type), fileName));    input = url.openStream();response.setContentType("application/octet-stream");response.setHeader("Content-Disposition","attachment; filename="+fileName);out = response.getOutputStream();int i = 0;byte[] buffer = new byte[2048];while((i = input.read(buffer)) != -1){out.write(buffer,0,i);}out.flush();input.close();}catch(Exception e){throw new SurveyServiceException("文件读取异常，详细请看日志", e);}finally{if(out != null){try {out.close();} catch (IOException e) {throw new SurveyServiceException("文件读取异常，详细请看日志", e);}}if(input != null){try {input.close();} catch (IOException e) {throw new SurveyServiceException("文件读取异常，详细请看日志", e);}}}return null;}

参考网址：http://www.html580.com/9995/