浏览图片使用了layer插件,旋转需要引用jquery.rotate.min.js 放大缩小是根据图片等比例缩放，下面是本人写的部分代码：
在layer.ext.js这个插件的扩展js文件里需要加上如下代码，实现旋转，缩放功能：
//旋转 var value = 0; log.imgtit.find('a').on('click', function () { value += 90; log.bigimg.find('img').rotate({ animateTo: value }) }); var smallsize = log.bigimg.find('img').height(); // 放大 log.imgbar.find('.xubox_imgtit1 a').on('click', function () { var standard = log.bigimg.width() > log.bigimg.height() ? log.bigimg.height() : log.bigimg.width(); if (standard - smallsize >= 100) { smallsize += 100; } else { smallsize = standard; } AutoResizeImage(smallsize, smallsize, log.bigimg.find('img')); }) //缩小 log.imgbar.find('.xubox_imgtit2 a').on('click', function () { smallsize = log.bigimg.find('img').height(); if (smallsize > 100) { smallsize -= 100; } AutoResizeImage(smallsize, smallsize, log.bigimg.find('img')); })
function changesize(objImg) { var img = new Image(); img.src = objImg.attr('src'); var most = 200; //设置最大宽度 if (img.width > most) { var scaling = 1 - (img.width - most) / img.width; //计算缩小比例 objImg.css({ img.width * scaling, height: img.height * scaling }); //img元素没有设置高度时将自动等比例缩小 //objImg.height = objImg.height*scaling; //img元素设置高度时需进行等比例缩小 } } function AutoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg.attr('src'); var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth == 0 && maxHeight == 0) { Ratio = 1; } else if (maxWidth == 0) { // if (hRatio < 1) Ratio = hRatio; } else if (maxHeight == 0) { if (wRatio < 1) Ratio = wRatio; } else if (wRatio < 1 || hRatio < 1) { Ratio = (wRatio <= hRatio ? wRatio : hRatio); } else { Ratio = (wRatio <= hRatio ? wRatio : hRatio); } if (Ratio < 1) { w = w * Ratio; h = h * Ratio; } if (Ratio > 1) { w = w * Ratio; h = h * Ratio; } //根据图片大小变化定位图片位置 var wd = $(window); var area1 = (wd.height() > 400 ? wd.height() - 50 : 400); if (area1 > h) { objImg.css({ top: (area1 - h) / 2 }) } else { objImg.css({ top: (h - area1) / 2 }) } objImg.css({ w, height: h }); }
这是前端代码：<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <link id="easyuiTheme" href="Content/themes/jquery-easyui/default/easyui.css" rel="stylesheet" /> <script src="Scripts/jquery-easyui/jquery.min.js" type="text/javascript"></script> <script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="Scripts/datagrid-detailview.js" type="text/javascript"></script> <script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script> <script src="Scripts/jquery.media.js" type="text/javascript"></script> <script src="Scripts/jwplayer/1.5/jwplayer.js" type="text/javascript"></script> <script src="layer/layer.min.js"></script> <script src="Scripts/jquery.rotate.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tZPqYVqppsRdOD9ncyGRXsWy"></script> <style> html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'} a,a:hover{ text-decoration:none;} pre{font-family:'微软雅黑'} .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;} .box a{padding-right:15px;} #about_hide{display:none} .layer_text{background-color:#fff; padding:20px;} .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;} .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;} .imgs img{width:300px;padding:0 30px 30px; cursor:pointer;} </style> </head> <body> <table id="grid1" title="接收文书证据列表" style=" 700px; height: 300px" data-options=" rownumbers:true, singleSelect:true, autoRowHeight:false, fit:true, fitColumns: true, pagination:true, pageSize:10"> <thead> <tr> <th field="e_tjrdw" width="80"> 提交人地位 </th> <th field="e_tjrmc" width="100"> 提交人姓名 </th> <th field="e_wsbt" width="80" align="right"> 文书名称 </th> <th field="e_wslb" width="80" align="right"> 类型 </th> <th field="e_nrjzy" width="100" align="right"> 证据目的 </th> <th field="inserttime" width="110"> 提交时间 </th> </tr> </thead> </table> <div id="TV_div"> <div id="container"> </div> </div> <div id="certificate_dialog" class="easyui-dialog" style=" 860px; height: 560px; padding: 10px 20px; background-color: White" closed="true"> <form id="certificate_form" method="post"> <div class="fitem" style="float: left;"> <a class="media" href="#" id="PDFFile"></a> </div> </form> </div> <div id="imgs" class="imgs" style="display: none"> <img id="img1" src="Content/Images/chrome.png" layer-pname="懒人之家 - 1"> </div> <a id="hupload"></a> <script> ; !function () { layer.use('extend/layer.ext.js', function () { //初始加载即调用，所以需放在ext回调里 layer.ext = function () { layer.photosPage({ title: '旋转', id: 100, //相册id，可选 parent: '#imgs' }); }; }); } (); function getData() { var rows = []; for (var i = 1; i <= 800; i++) { var amount = Math.floor(Math.random() * 1000); var price = Math.floor(Math.random() * 1000); rows.push({ e_tjrdw: '法官' + i, inserttime: $.fn.datebox.defaults.formatter(new Date()), e_tjrmc: '开福区管理员' + i, e_wsbt: "文书证券" + amount + "号", e_wslb: "GT", e_nrjzy: "GT" + i }); } return rows; } function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function () { $('#grid1').datagrid({ view: detailview, detailFormatter: function (rowIndex, rowData) { return '<div style="padding:2px"><table id="ddv-' + rowIndex + '"></table></div>'; }, onExpandRow: function (index, row) { $('#ddv-' + index).datagrid({ singleSelect: true, rownumbers: true, fitColumns: true, //数据列自适应宽度 height: 'auto', columns: [[{ field: 'c_ssdw', title: '文书名称', align: 'center', 100 }, { field: 'c_dsrxm', title: '类别', align: 'center', 100 }, { field: 'c_zjhm', title: '递交时间', align: 'center', 200 }, { field: 'c_sjhm', title: '文件类型', align: 'center', 150 }, { field: 'p_password', title: '操作', align: 'center', 150 }]], onResize: function () { $('#grid1').datagrid('fixDetailRowHeight', index); }, onLoadSuccess: function () { setTimeout(function () { $('#grid1').datagrid('fixDetailRowHeight', index); }, 0); } }).datagrid('loadData', getData1()); }, loadFilter: pagerFilter }).datagrid('loadData', getData()); }); function getData1() { var rows = []; for (var i = 1; i <= 10; i++) { var amount = Math.floor(Math.random() * 1000); var price = Math.floor(Math.random() * 1000); if (i <= 3) { var buttontype = "下载"; var fileType = "文档"; } else if (i > 3 & i <= 6) { buttontype = "浏览"; fileType = "PDF"; } else if (i > 6 & i <= 8) { buttontype = "浏览"; fileType = "图片"; } else if (i == 9) { buttontype = "浏览"; fileType = "视频"; } else { buttontype = "浏览"; fileType = "音频"; } rows.push({ c_ssdw: fileType, c_zjhm: $.fn.datebox.defaults.formatter(new Date()), c_dsrxm: fileType, c_sjhm: "GT" + amount + "号", p_password: "<a href='#' class='submenu' iconcls='icon-search' onclick='look("" + fileType + "")'><span>" + buttontype + "</span></a>" }); } return rows; } function look(buttontype) { if (buttontype == "文档") { wdupload123(); } else if (buttontype == "PDF") { lookPDF(); } else if (buttontype == "图片") { lookPNG(); } else if (buttontype == "视频" || buttontype == "音频") { lookTV(); } } //下载文档 function wdupload123() { $.messager.confirm('下载', '此文件无法在线查看，您确认下载文件吗？', function (r) { if (r) { $("#hupload").attr("href", "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv"); document.getElementById("hupload").click(); } }); } //查看PDF function lookPDF() { $('#PDFFile').media({ type: 'html', 800, height: 490, src: "http://192.168.0.100:8099/doc/RECEIVE/f178a5aeee934511b912957635ad0132.pdf" }); $('#certificate_dialog').show().dialog({ title: '查看PDF', closed: false, modal: true }); } //查看视频 function lookTV() { $("#TV_div").show().dialog({ title: '查看', closed: false, modal: true, height: 500, 670 }); var thePlayer = jwplayer("container").setup({ flashplayer: "Scripts/jwplayer/1.5/player.swf", 640, height: 460, dock: false, provider: "http", file: "http://192.168.0.100:8093/Media/ddff0b1286b040e88a5f07f591eebff6.flv", autostart: true }); } function lookPNG() { document.getElementById("img1").click(); } // $(document).ready(function () { // var value2 = 0 // $("#img1").rotate({ // bind:{ // click: function () { // value2 += 90; // $(this).rotate({ animateTo: value2 }) // } // } // }); //}); </script> </body> </html>
源码，插件包下载：http://i.cnblogs.com/Files.aspx
参考资料来自：（jQuery模拟QQ空间相册点开大图效果）http://www.lanrenzhijia.com/jquery/2855.html
（jQuery旋转效果）http://www.lanrenzhijia.com/jquery/2790.html
（js图片等比例缩放）http://blog.snsgou.com/post-397.html