浏览图片使用了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({ width: 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({ width: 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="width: 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="width: 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 '' + rowIndex + '">
';
},
onExpandRow: function (index, row) {
$('#ddv-' + index).datagrid({
singleSelect: true,
rownumbers: true,
fitColumns: true, //数据列自适应宽度
height: 'auto',
columns: [[{
field: 'c_ssdw',
title: '文书名称',
align: 'center',
width: 100
}, {
field: 'c_dsrxm',
title: '类别',
align: 'center',
width: 100
}, {
field: 'c_zjhm',
title: '递交时间',
align: 'center',
width: 200
}, {
field: 'c_sjhm',
title: '文件类型',
align: 'center',
width: 150
}, {
field: 'p_password',
title: '操作',
align: 'center',
width: 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: "" + buttontype + ""
});
}
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',
width: 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,
width: 670
});
var thePlayer = jwplayer("container").setup({
flashplayer: "Scripts/jwplayer/1.5/player.swf",
width: 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