dwz
- 页面
<link href="/codeManage/public/imgZoom/jquery.artZoom.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="/codeManage/public/imgZoom/jquery.artZoom.min.js" type="text/javascript"></script>
<script>
$('.artZoom').artZoom({
path: 'public/imgZoom/images', // 设置artZoom图片文件夹路径
preload: true, // 设置是否提前缓存视野内的大图片
blur: true, // 设置加载大图是否有模糊变清晰的效果
// 语言设置
left: '左旋转', // 左旋转按钮文字
right: '右旋转', // 右旋转按钮文字
source: '看原图' // 查看原图按钮文字
});
//删除后刷新
function navTabReload(id){
DWZ.ajaxDone(id);
navTab.reloadFlag("Jgdebind_publicfindPic");
}
</script>
<style>
.img_title {
font-size: 14px;
font-weight: bold;
height: 25px;
width: 300px;
border: 1px solid #666666;
background-position: center;
vertical-align: middle;
line-height: 25px;
}
.imgsss {
max-width: 900px;
width:expression(this.width > 900 ? "900px" : this.width+"px"); overflow:hidden;
max-height: 300px;
height:expression(this.height > 300 ? "300px" : this.height+"px"); overflow:hidden;
}
.filesDiv{
width: 800px;
height: 25px;
border: 1px solid #7cc5e5;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 14px;
line-height: 25px;
font-weight: bold;
color: #7cc5e5;
}
.picDiv{
width: 400px;
height: 25px;
border: 1px solid #7cc5e5;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 14px;
line-height: 25px;
font-weight: bold;
color: #7cc5e5;
}
</style>
<p class="pagecontent">
<form method="post" action="/codeManage/?spm=${encryption("Jgdebind/publicfindPic")}" class="pageForm required-validate" "return validateCallback(this, navTabAjaxDone);">
<p class="pageFormContent" layoutH="56">
<p class="filesDiv">
(编号：${(dnum)! })商户---资料图片
</p>
<p class="pider"></p>
<#list filesList as files >
<table style="width:100%;text-align: center;">
<tr>
<td style="width:100%;text-align: center;"><img alt="${files.AFI_FILENAME}--点击查看大图（旋转照片）" src="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}" class="artZoom imgsss" data-artZoom-show="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}" data-artZoom-source="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}"></td>
</tr>
<tr>
<td style="height: 40px;">
<p class="picDiv">
${(files.AFI_FILENAME)! }
<a href="/codeManage/?spm=${encryption("APPFilesInfo/delete")}&id=${(files.AFI_ID)! }" style="color:blue;" target="ajaxTodo" callback="navTabReload" title="确认删除${(files.AFI_FILENAME)! }吗？">(删除)</a>
</p>
</td>
</tr>
</table>
<p class="pider"></p>
</#list>
</p>
<p class="formBar">
<ul>
<!--<li>
<a class="buttonActive" href="${(projectName)!}/?spm=${encryption("AppFilesInfo/add")}&dnum=${(dnum)!}" rel="Filesinfo_pperaFile" target="dialog" width="1000" height="500"><span>上传商户图片资料</span></a>
</li>-->
<li>
<p class="button">
<p class="buttonContent">
<button type="button" class="close">
关闭
</button>
</p>
</p>
</li>
</ul>
</p>
</form>
</p>
- 后台
@requestMapping("/publicfindPic")
public String publicfindPic() {
String id = request.getparameter("id");
List<Map<String, Object>> filesInfoList = jgdebindservice.getList("selectPicInfo", id.toString());
// 存储图片信息
setAttribute("filesList", filesInfoList);
setAttribute("dnum", id);
return display();
}
@RequestMapping("/showImage")
public void showImage() throws IOException {
byte[] byt=request.getParameter("id").getBytes("ISO-8859-1");
String id=new String(byt,"utf-8");
response.setcontenttype("image/jpeg");
// 获取图片绝对路径
File file = new File(id);
// 创建文件输入流
fileinputstream is = new FileInputStream(file);
// 响应输出流
Servletoutputstream out = response.getOutputStream();
// 创建缓冲区
byte[] buffer = new byte[1024];
int len = 0;
while ((len = is.read(buffer)) != -1) {
out.write(buffer, 0, len);
}
is.close();
out.flush();
out.close();
}
jquery.artZoom.css
@charset "utf-8";
.ui-artZoom img { -ms-interpolation-mode:bicubic; }
.ui-artZoom-toolbar { height:26px; line-height:26px; padding:5px 0; }
.ui-artZoom-buttons { display:inline-block; *display:inline; *zoom:1; height:26px; line-height:0; margin-right: 5px; border-radius: 5px; transition:box-shadow linear .2s; -moz-transition: -moz-box-shadow linear .2s; -webkit-transition:-webkit-box-shadow linear .2s; outline: none; }
.ui-artZoom-buttons:hover { -webkit-box-shadow:0 0 3px rgba(29, 79, 132, .2); box-shadow:0 0 3px rgba(29, 79, 132, .2); }
.ui-artZoom-buttons:hover a { border-color:#ABABAB; }
.ui-artZoom-loading { color:#808080; font-size:12px; text-shadow:0 1px 0 rgba(255, 255, 255, .7); }
.ui-artZoom-buttons a { display: inline-block; padding: 5px 8px; font: 12px/1.11 "Microsoft Yahei", Tahoma, Arial, helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; _font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; outline: none; position: relative; zoom: 1; *display: inline; *vertical-align: middle; -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;}
.ui-artZoom-buttons a:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
.ui-artZoom-buttons a:active { top: 1px; background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
.ui-artZoom-noLoad a.ui-artZoom-left,
.ui-artZoom-noLoad a.ui-artZoom-right { background-position: 0 0; border-color:#CACACA; color: #999; cursor:default; text-shadow: 1px 1px 0 #FFFFFF; filter: Alpha(opacity=50); opacity:.5; }
.ui-artZoom-ready .ui-artZoom-loading span { width:5px; overflow:hidden; visibility:hidden; }
a.ui-artZoom-left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; border-right: none; }
a.ui-artZoom-right { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; }
a.ui-artZoom-source { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
a.ui-artZoom-left:active,
a.ui-artZoom-right:active,
a.ui-artZoom-source:active { top: 0px }
.ui-artZoom-buttons a span { display: inline-block; width: 12px; height: 12px; margin: auto 3px auto auto; position: relative; top: 0; *top: 0px; background-image: url('images/icons.png'); background-repeat: no-repeat; *font-size:0; vertical-align:middle; }
.ui-artZoom-hide { display:none !important; }
a.ui-artZoom-right span, .ui-artZoom-noLoad .ui-artZoom-buttons a.ui-artZoom-right span { background-position:0 -0; }
a.ui-artZoom-left span, .ui-artZoom-noLoad .ui-artZoom-buttons a.ui-artZoom-left span { background-position:-12px 0; }
a.ui-artZoom-source span { background-position:-24px 0; }
a.ui-artZoom-right:hover span,
a.ui-artZoom-right:active span { background-position:0 -12px; }
a.ui-artZoom-left:hover span,
a.ui-artZoom-left:active span { background-position:-12px -12px; }
a.ui-artZoom-source:hover span,
a.ui-artZoom-source:active span { background-position:-24px -12px; }
.ui-artZoom-show { background:transparent; border:3px solid #FFF!important; border-radius: 3px; }
.ui-artZoom-ready .ui-artZoom-photo { font-size:0; line-height:0; border:1px solid #D6D6D6; background:#FFF url(images/img.png) repeat; border-radius: 3px; box-shadow:1px 1px 3px rgba(0, 0, 0, .1); }
js下载地址