<%@page import="com.nome.util.*"%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
PageData pd =(PageData)request.getAttribute("pd");
List imgList =(List)request.getAttribute("imglist");
String ywbs = StringUtil.null2blank(request.getAttribute("ywbs"));
%>
<%@ include file="/static/common/include.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>上传照片详情</title>
<base href="<%=basePath%>">
<link href="<%=basePath%>plugins/slidepic/style/css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.xzys{
height:780px;padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper" >
<button id="rotateRight" οnclick="xzImg()" class="btn btn-sm btn-danger ">
<i class="ace-icon fa fa-share bigger-110"></i>
<span class="bigger-110 no-text-shadow">旋转图片</span>
</button>
<button href="#" id="shtgBtn" class="btn" title="审核通过"
οnclick="javaScript:window.parent.shtgByBusiId();" plain="true">
<i class="icon-16 icon-tg"></i>审核通过
</button>
<button href="#" id="shthBtn" class="btn" title="审核退回"
οnclick="javaScript:window.parent.approveBack();" plain="true">
<i class="icon-goback icon-16 "></i>审核退回
</button>
<button οnclick="showBigImg('');">放大</button>
<!--滚动看图-->
<div id="picSlideWrap" class="clearfix"><br>
<div class="imgnav" id="imgnav">
<div id="cbtn" style="margin-top: 0px;margin-bottom: 20px;">
<i class="picSildeLeft"><img src="<%=basePath%>plugins/slidepic/images/ico/picSlideLeft.gif"></i>
<i class="picSildeRight"><img src="<%=basePath%>plugins/slidepic/images/ico/picSlideRight.gif"></i>
<div id="cSlideUl">
<ul>
<%
for(int i=0;i<imgList.size();i++){
Map map=null;
map=(Map)imgList.get(i);
String fjxxbs = (String) map.get("FJXXBS");
%>
<li><img src="<%=basePath%>fileUpload/downloadFile?fileId=<%=fjxxbs%>"><tt></tt></li>
<%
}
%>
<!--
<li><img src="<%=basePath%>plugins/slidepic/images/100260_1306276811398.jpg"><tt></tt></li>
-->
</ul>
</div>
</div>
<div id="img" >
<%
for(int i=0;i<imgList.size();i++){
Map map=null;
map=(Map)imgList.get(i);
String fjxxbs = (String) map.get("FJXXBS");
%>
<img class="showImg" src="<%=basePath%>fileUpload/downloadFile?fileId=<%=fjxxbs%>" width="780" height="570">
<%
}
%>
<!--
<img src="plugins/slidepic/images/100261_1306276853791.jpg" width="780" height="570">-->
<div id="front" title="上一张" style="width: 100px;"><a href="javaScript:void(0)" class="pngFix"></a></div>
<div id="next" title="下一张" style="width: 100px;"><a href="javaScript:void(0)" class="pngFix"></a></div>
</div>
<div id="content">
</div>
</div>
</div><!--end滚动看图-->
</div>
<script>
var index=0;
var length=$("#img img").length;
var i=1;
var r = 0;
function xzImg(){
debugger;
r += 90;
if($("#img").hasClass("xzys"))
{
$("#img").removeClass("xzys");
}else{
$("#img").addClass("xzys")
}
$("#img img").eq(index).css('transform', 'rotate(' + r + 'deg)');
}
windowAddMouseWheel();
var wd=40;
function windowAddMouseWheel() {
var scrollFunc = function (e) {
$(".bigImg").width()
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
wd-=5;
if(wd<10)
{
wd=10;
}
$( window.parent.document.getElementById("bigImg")).css("width",wd+"%");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
wd+=5;
if(wd>80)
{
wd=80;
}
$( window.parent.document.getElementById("bigImg")).css("width",wd+"%");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
wd-=5;
if(wd<10)
{
wd=10;
}
$( window.parent.document.getElementById("bigImg")).css("width",wd+"%");
}
if (e.detail< 0) { //当滑轮向下滚动时
wd+=5;
if(wd>80)
{
wd=80;
}
$( window.parent.document.getElementById("bigImg")).css("width",wd+"%");
}
}
};
//给页面绑定滑轮滚动事件
if (window.parent.document.addEventListener) {
window.parent.document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.parent.document.onmousewheel = window.parent.document.onmousewheel = scrollFunc;
}
var currentBigImg="";
function showBigImg(src){
if(src=="")
{
src=currentBigImg;
}
wd=40;
var bigImg=$("<div id='bgimgZZ' ><div style=' z-Index:99999998; opacity:0.6; filter:alpha(opacity=60); height:100%; width:100%; background:rgba(0, 0, 0, 0.4); position:absolute;left:0px;top:0px;'></div><img id='bigImg' style='position: absolute;z-index: 99999999;width:40%;' src='"+src+"'/></div>");
$(window.parent.document.body).append(bigImg)
$( window.parent.document.getElementById("bgimgZZ")).click(function () {
$( window.parent.document.getElementById("bgimgZZ")).remove();
});
}
$(document).ready(function(){
$("body").css("background-color","white");
// $(".showImg").mouseover(function (event) {
// var e = event || window.event;
//alert("'x':"+e.screenX+",'y':"+e.screenY+"");
// showBigImg($(this).attr("src"))
// });
currentBigImg=$("#img img").eq(0).attr("src");
//关键函数：通过控制i ，来显示图片
function showImg(i){
$("#img").removeClass("xzys");
r = 0;
$("#img img").eq(index).css('transform', 'rotate(' +r + 'deg)');
currentBigImg=$("#img img").eq(index).attr("src");
// alert(currentBigImg)
$("#img img")
.eq(i).stop(true,true).fadeIn(800)
.siblings("img").hide();
$("#cbtn li")
.eq(i).addClass("hov")
.siblings().removeClass("hov");
}
function slideNext(){
if(index >= 0 && index < length-1) {
++index;
showImg(index);
}else{
// if(confirm("已经是最后一张,点击确定重新浏览！")){
showImg(0);
index=0;
if(length<=5)
{
aniPx=0+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
}else
{
aniPx = (length - 5) * 142 + 'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
}
$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
i=1;
// }
return false;
}
if(i<0 || i>length-5) {return false;}
$("#cSlideUl ul").animate({ "left": "-=142px" },200);
i++;
}
function slideFront(){
if(index >= 1 ) {
--index;
showImg(index);
}
if(i<2 || i>length+5) {return false;}
$("#cSlideUl ul").animate({ "left": "+=142px" },200);
i--;
}
$("#img img").eq(0).show();
$("#cbtn li").eq(0).addClass("hov");
$("#cbtn tt").each(function(e){
var str=(e+1)+""+length;
$(this).html(str)
});
$(".picSildeRight,#next").click(function(){
slideNext();
});
$(".picSildeLeft,#front").click(function(){
slideFront();
});
$("#cbtn li").click(function(){
if( $("#cbtn li").index(this)== index)
{
return;
}
index = $("#cbtn li").index(this);
showImg(index);
});
$("#next,#front").hover(function(){
$(this).children("a").fadeIn();
},function(){
$(this).children("a").fadeOut();
})
})
</script>
</body>
</html>
@charset "utf-8";
body{font-size:12px;font-family:"宋体",Arial,sans-serif; color:#343434; background:#000;}
html,body,div,span,p,h1,h2,h3,h4,h5,h6,em,img,strong,sub,sup,tt,dd,dl,dt,form,label,table,caption,tbody, tfoot, thead,tr,th,td,ul,li,p,a{ margin:0;padding:0;}
.cbody988{ margin:0 auto;width:988px; position:relative;}
.cbody937{ margin:0 auto;width:937px; position:relative; padding-left:7px;}
input,select,textarea,img{vertical-align:middle;}
img{ border:0;}
ul,li{list-style-type:none;}
a:link,a:visited{text-decoration:none; color:#343434;}
a:hover{text-decoration:underline; color:#0F6BD0;}
.overhide{overflow:hidden;text-indent:-100em;}
/*位置属性*/
.marTop10{margin-top:10px;}
.left{ float:left;}
.right{ float:right;}
.clear {clear: both;}
.clearfix:after {clear: both;content: '';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {display: +inline-block;}
/*header*/
#header{ border-bottom:1px solid #383838; height:46px; position:relative; line-height:46px;color:#FFFFFF; }
#header h1{font-size:12px; font-weight:normal; background:url(news.png) no-repeat 50px center; padding-left:163px;}
#header span{ position:absolute; right:10px; top:0px;color:#9A9A9A;font-size:12px; font-weight:normal; }
#header span a{ color:#9A9A9A; margin:0 3px;}
/*wrapper*/
#wrapper{ width:960px; margin:0 auto;}
#picSlideWrap{ background:#F5F8FD; border:1px solid #A9BFD6; padding-bottom:30px;}
.titleh3{ height:70px; line-height:70px; text-align:center; background:url(../images/ico/dot.gif) repeat-x left bottom; width:910px; margin:0 auto; font-size:26px; color:#000;}
.titleh4{text-align:center; font-size:12px; color:#000; font-weight:normal; padding:10px 0 20px 0px;}
.imgnav{ width:980px; margin:10px auto;}
#content{margin:0px auto; line-height:19px;}
#content p{ text-indent:2em; color:#333;}
.imgnav{ position:relative; margin:0 auto; width:788px;}
#img{ z-index:10; width:788px; position:relative; text-align:center;}
#img img{ height:570px; display:none; border:4px solid #000;}
#front{ position:absolute; left:0px; top:0px; z-index:10; cursor:pointer; width:394px; height:578px; background:url(../images/ico/blank.gif); }
#front a{ position:absolute; left:20px; top:224px;display:block; background:url(../images/ico/imgSlideLeft.png) no-repeat; width:104px; height:104px; display:none;}
#next{ position:absolute; right:0px; top:0px; z-index:10;cursor:pointer; width:394px; height:578px; background:url(../images/ico/blank.gif);}
#next a{ position:absolute; right:20px; top:224px; display:block; background:url(../images/ico/imgSlideRight.png) no-repeat; width:104px; height:104px; display:none;}
#cbtn{background:#EAEBF0; position:relative; height:122px; border:1px solid #D6D9DC; margin-top:12px; }
#cbtn ul{position:relative; width:10000px; height:122px;}
#cbtn ul li{ float:left; padding:8px 3px 3px 3px; width:116px; height:86px; cursor:pointer; text-align:center; margin-right:20px; position:relative;}
#cbtn ul li img{ width:116px; height:86px; display:block;}
#cbtn ul li tt{ background:#000; color:#FFF; position:absolute; right:4px; bottom:4px; z-index:20; font-family:"宋体" ;font-size:12px; line-height:16px; padding:0 5px;}
#cbtn li.hov{ background:url(../images/ico/imgHoverBg.gif) no-repeat;}
.ctrl div{ clear:both;}
#cSlideUl{width:690px; height:116px;overflow:hidden; position:relative; top:10px; margin:0 auto;}
.picSildeLeft{cursor:pointer; position:absolute; top:32px; left:10px; z-index:9;}
.picSildeRight{cursor:pointer; position:absolute; top:32px; right:10px; z-index:9;}
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
