手动实现图片预览-放大缩小全屏支持IE9以上

 

#{extends '/Index/index.html' /} #{set title:'意见反馈' /}
<script src="/public/mgr/javascripts/jQueryRotate.2.2.js" type="text/javascript" charset="${_response_encoding}"></script>
<style>
    /*弹框相关样式开始*/
    .white_content1 {
        display: none;
        position: fixed;
        top: auto;
        width: auto;
        height: auto; 
        /* border: 16px solid lightblue; */
        background-color: white;
        z-index: 1000000000000002;
        overflow: 100%;
    }
    /*弹框相关样式结束*/
    .form_item input{ padding-top: 6px; text-indent: 5px; }
    .big_list ul{ height: 40px; line-height: 40px; background: #fff; margin-top: 5px; }
    .big_list ul li{ height: 40px; line-height: 40px; }
    .big_list ul li:nth-child(1){ width: 300px; text-align: left; float: left; padding-left: 15px; }
    .big_list ul li:nth-child(2){ width: 750px; text-align: left; float: right; }
    .form_box .form_item .select_box_label{ text-align: left; }
    .table_box {
        position: relative;
    }
   
    .left_content {
        width: 160px;
        background: #F9F9F9;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        /* min-height: 520px; */
        height: 100%;
        float: left;
    }

    .left_content ul li {
        list-style: none;
        display: list-item;
        text-align: -webkit-match-parent
    }

    .left_content ul {
        width: 100%;
    }

    .left_content ul li a {
        position: relative;
        display: block;
        background: #F9F9F9;
        color: #45494c;
        height: 42px;
        line-height: 42px;
        width: 100%;
        height: 100%;
        text-align: left;
        font-size: 16px;
        margin-bottom: 2px;
        text-indent:10px;
    }

    .left_content ul li a.active {
        background: #E8CB89;
        color: #fff;
    }

    .left_content ul li a:hover {
        background: #E8CB89;
        color: #fff;
    }

    .table_container {
        background: #fff;
        position: absolute;
    }
    .table_container table th {
        border: none;
        border-bottom: 2px solid #e3cc8f;
        line-height: 32px;
        height: 32px;
        user-select: none;
    }

    .table_container table .tr_head {
        height: 42px;
    }

    .table_container table .tr_head th {
        text-align: left;
        font-size: 15px;
        padding-left: 32px;
    }

    .table_container table td {
        text-align: left;
        border: none
    }
    .table_container table td a{
        cursor:pointer;
    }
    .table_container table tr:hover td { background-color: #fcf7eb; border: none}
    .table_container table tr:nth-child(2n) {
        background: #F9F9F9;
    }
    .table_container table tr {
        background-color: expression((this.sectionRowIndex % 2==0) ? "#F9F9F9": "#fcf7eb");
    }
    .keyword_td{
      color:#BFBFBF;
      padding-left: 35px;
      padding-right:35px;
    }
    .question_td{
        padding-left: 35px;
         padding-bottom: 4px;
        padding-top: 4px;
        line-height: 28px;
    }
    .keyword_th{width: 20%;}
    .question_th{width: 80%;}
    
    .table_box.table_box_new{ background-color: transparent;position: relative;height: 100%; }
    .textbox-text .validatebox-text{margin-top: -8px;}
     .jbox-container{
      width:800px;
    }
    /*
     * lichao
     * 弹框宽度
     */
    div.jbox .jbox-container{
        width: 690px !important;
    }
     .btn_form{
       /*  margin-right: 200px; */
        display: inline;
        float: right;
    }
    .form_box .submit_box{
        right: 180px;
    }
    .textbox-addon {
    position: absolute;
    top: 5px;
    }
    .form_item .select_box .combo input {
    margin-top: -7px;
    font-size: 15px;
    }
    .feedback_content{
     padding: 5px;
     font-size: 16px;
     color: #131212;
    }
    .feedback_name .feedback_name_time{
    margin-left: 15px;
    font-size: 15px;
    position: absolute;
    margin-top: 2.2px;
     }
     .feedback_content .feedback_name_p{
     padding: 15px;
     font-size: 16px;
     color: #131212;
     font-weight: bold
    }
    
    .fd_gif{
        margin-left: -20px;
        margin-top: 15px;
    }
    .feedback_question{
        margin-left: 50px;
        margin-top: 15px;
        word-wrap:break-word;
    }
    .feedback_answer{
        margin-left: 50px;
        margin-top: 15px;
        word-wrap:break-word;
        color: #ff8a00;
    }
    .feedback_title{
         margin-left: 5px;
    }
    .feedback_time{
    margin-left: 50px;
    font-size: 15px;
    color: #bbb;
    margin-top: 5px;
    }
    .feedback_answer_content{
        color: #ff8a00;
        margin-left: 50px;
        margin-top: 5px;
        word-wrap:break-word;
    }
    .feedback_delete{
        margin-left: 50px;
        margin-top: 5px;
        color: red;
    }
    .feedback_delete_text{
        margin-left: 43px;
    }
    .feedback_img{
        margin-left: 50px;
        margin-top: 8px;
    }
    .feedback_img_t{
        text-align: center;
        margin-left: 5px;
        padding-top: 5px;
        margin-left: 50px;
        margin-top: 8px;
    }
    .feedback_img img{
        width:80px;
        height:80px;
    }
    .feedback_img_t img{
        width:80px;
        height:80px;
    }
    .showQuestion_img{
        height:400px;
    }
    
    .pather .cont span a {
    vertical-align: top;
    }
    
    .form_box .submit_box .feeback_btn {
    text-align: left;
    font-size: 18px;
    margin-right: 30px;
    line-height: 40px;
    height: 41px;
    cursor: pointer;
    color: #fff;
    letter-spacing: 3px;
    text-indent: 60px;
    border: none;
    background: url(/public/mgr/images/feedback/fb_btn.png) no-repeat left top;
    width: 181px;
    }
    
    .form_box .submit_box .feeback_btn:hover{
    text-align: left;
    font-size: 18px;
    margin-right: 30px;
    line-height: 40px;
    height: 41px;
    cursor: pointer;
    color: #fff;
    letter-spacing: 3px;
    text-indent: 60px;
    border: none;
    background: url(/public/mgr/images/feedback/fb_btn.png) no-repeat 100% top;
    width: 181px;
    }
    
    
        /************************** 弹出框样式   start***************/
    
        .photo-mask {
        position: fixed;
        z-index: 1000;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        filter: alpha(opacity=20);
        -moz-opacity: 0.8;
        opacity: 0.8;
        display: none;
    }
    
    .photo-panel {
        position: fixed;
        display: none;
        clear: both;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1001;
    /*     width: 100%;
        height: 100%; */
        _padding:0 17px 0 0; 
    }
    
    .photo-panel-2 {
        position: fixed;
        display: none;
        clear: both;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1001;
/*         width: 100%;
        height: 100%; */
        _padding:0 17px 0 0; 
    }
    
    .photo-panel-3 {
        position: fixed;
        display: none;
        clear: both;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1001;
        /* width: 100%;
        height: 100%; */
        _padding:0 17px 0 0; 
    }
    
    .photo-panel .photo-div,
    .photo-panel .photo-bar {
        width: 100%;
    }
    
    .photo-panel-2 .photo-div,
    .photo-panel-2 .photo-bar,
    .photo-panel-3 .photo-div,
    .photo-panel-3 .photo-bar {
        width: 100%;
    }
    
    .form_box .form_item .text_input input {
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 26px;
    width: 175px;
    text-indent: 5px;
    color: #666;
    font-size: 15px;
    padding-top: 2px;
    }
    
    .photo-panel .photo-div {
        width: 960px;
        height: 560px;
        z-index: 11;
        margin: auto;
        position: relative;
    }
    
    .photo-panel-2 .photo-div {
        width: 960px;
        height: 560px;
        z-index: 11;
        margin: auto;
        position: relative;
    }
    
    .photo-panel-3 .photo-div {
        width: 100%;
        height:  100%;
        z-index: 11;
        margin: auto;
        position: relative;
    }
    
    .photo-panel .photo-close {
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll 0px 0px transparent;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 130px !important;
        top: 10px !important;
    }
    
    .photo-panel-2 .photo-close {
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll 0px 0px transparent;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 80px !important;
        top: 10px !important;
    }
    .photo-panel-3 .photo-close {
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll 0px 0px transparent;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 5% !important;
        top: 10px !important;
    }
    
    .photo-panel .photo-close:hover {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 130px !important;
        top: 10px !important;
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll -31px 0px transparent;
    }
    
    .photo-panel-2 .photo-close:hover {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 80px !important;
        top: 10px !important;
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll -31px 0px transparent;
    }
    .photo-panel-3 .photo-close:hover {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 5% !important;
        top: 10px !important;
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-close1.png) no-repeat scroll -31px 0px transparent;
    }
    
    .jbox-title-panel {
    background: #f7f1e0;
    height: 53px !important;
    }
    .photo-panel .photo-bar-tip {
        width: 700px;
        position: absolute;
        margin: -114px 0 0 10px;
    }
    
    .photo-panel-2 .photo-bar-tip {
        width: 820px;
        position: absolute;
        margin: -114px 0 0 10px;
    }
    .photo-panel-3 .photo-bar-tip {
        width: 820px;
        position: absolute;
        margin: -114px 0 0 10px;
    }
    
    .photo-panel .feedback_img_t{
        margin-left: 0;
        text-align: center;
    }
    
    .photo-panel-2 .feedback_img_t{
        text-align: center;
        padding-top: 5px;
        margin-left: -17px;
        margin-top: 62px;
    }
    .photo-panel-3 .feedback_img_t{
        text-align: center;
        padding-top: 5px;
        margin-left: -17px;
        margin-top: 62px;
    }
    
    .photo-panel .photo-img {
        width: 720px;
        float: left;
        height: 600px;
        background: #fff;
    }
    
    .photo-panel-2 .photo-img {
        width: 820px;
        float: left;
        height: 661px;
        background: #fff;
    }
    .photo-panel-3 .photo-img {
        width: 820px;
        float: left;
        height: 661px;
    }
    
    .photo-panel .photo-view-w {
        width: 720px;
        height: 560px;
        text-align: center;
        vertical-align: middle;
    }
    
    .photo-panel-2 .photo-view-w {
        width: 800px;
        height: 554px;
        text-align: center;
        vertical-align: middle;
    }
    .photo-panel-3 .photo-view-w {
        width: 800px;
        height: 554px;
        text-align: center;
        vertical-align: middle;
    }
    
    .photo-panel .photo-view-h {
        width: 720px;
        height: 560px;
        text-align: center;
        vertical-align: middle;
    }
    
    .photo-panel-2 .photo-view-h {
        width: 820px;
        height: 560px;
        text-align: center;
        vertical-align: middle;
    }
    .photo-panel-3 .photo-view-h {
        text-align: center;
        vertical-align: middle;
    }
    
    .photo-panel .photo-view-w img {
        max-width: 700px;
        min-width: 400px;
        height: auto;
        vertical-align: middle;
        text-align: center;
        max-height: 440px;
        -moz-box-shadow: 5px 5px 5px #a6a6a6;
        /* 老的 Firefox */
         box-shadow: 5px 5px 5px #a6a6a6;
        /* -webkit-animation: swing 1s .2s ease both;
        -moz-animation: swing 1s .2s ease both; */
    }
    
    .photo-panel-2 .photo-view-w img {
        max-width: 800px;
        min-width: 500px;
        height: 500px;
        vertical-align: middle;
        text-align: center;
        max-height: 500px;
        -moz-box-shadow: 5px 5px 5px #a6a6a6;
        box-shadow: 5px 5px 5px #a6a6a6;
    }
    .photo-panel-3 .photo-view-w img {
        max-width: 800px;
        min-width: 500px;
        height: 500px;
        vertical-align: middle;
        text-align: center;
        max-height: 500px;
        -moz-box-shadow: 5px 5px 5px #a6a6a6;
        box-shadow: 5px 5px 5px #a6a6a6;
    }
    .photo-panel .photo-view-h img {
        max-width: 700px;
        max-height: 440px;
        height: 540px;
        margin: 10px;
        -moz-box-shadow: 5px 5px 5px #a6a6a6;
        /* 老的 Firefox */
        box-shadow: 5px 5px 5px #a6a6a6;
        /* -webkit-animation: swing 1s .2s ease both;
        -moz-animation: swing 1s .2s ease both;  */
    }
    
    .photo-panel-2 .photo-view-h img {
        max-width: 825px;
        max-height: 501px;
        height: 561px;
        -moz-box-shadow: 5px 5px 5px #a6a6a6;
        box-shadow: 5px 5px 5px #a6a6a6;
    }
    .photo-panel-3 .photo-view-h img {
        width: auto;
    }
    
    @-webkit-keyframes swing {
        20%,
        40%,
        60%,
        80%,
        100% {
            -webkit-transform-origin: top center
        }
        20% {
            -webkit-transform: rotate(15deg)
        }
        40% {
            -webkit-transform: rotate(-10deg)
        }
        60% {
            -webkit-transform: rotate(5deg)
        }
        80% {
            -webkit-transform: rotate(-5deg)
        }
        100% {
            -webkit-transform: rotate(0deg)
        }
    }
    
    @-moz-keyframes swing {
        20%,
        40%,
        60%,
        80%,
        100% {
            -moz-transform-origin: top center
        }
        20% {
            -moz-transform: rotate(15deg)
        }
        40% {
            -moz-transform: rotate(-10deg)
        }
        60% {
            -moz-transform: rotate(5deg)
        }
        80% {
            -moz-transform: rotate(-5deg)
        }
        100% {
            -moz-transform: rotate(0deg)
        }
    }
    
    .photo-panel .photo-left,
    .photo-panel .photo-right {
        width: 120px;
        float: left;
        margin-top: 220px;
    }
    
    .photo-panel-2 .photo-left,
    .photo-panel-2 .photo-right {
        width: 65px;
        float: left;
        margin-top: 20%;
    }
    .photo-panel-3 .photo-left,
    .photo-panel-3 .photo-right {
        width: 65px;
        float: left;
        margin-top: 20%;
    }
    
    .photo-panel .arrow-prv {
        background: url(/public/mgr/images/feedback/l.png);
        width: 120px;
        height: 120px;
    }
    
    .photo-panel-2 .arrow-prv {
        background: url(/public/mgr/images/feedback/l.png);
        width: 120px;
        height: 120px;
        margin-left: -50px;
    }
    .photo-panel-3 .arrow-prv {
        background: url(/public/mgr/images/feedback/l.png);
        width: 120px;
        height: 120px;
        margin-left: -40px;
    }
    
    .photo-panel .arrow-prv:hover {
        background: url(/public/mgr/images/feedback/l_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    
    .photo-panel-2 .arrow-prv:hover {
        background: url(/public/mgr/images/feedback/l_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    .photo-panel-3 .arrow-prv:hover {
        background: url(/public/mgr/images/feedback/l_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    
    .photo-panel .arrow-next {
        background: url(/public/mgr/images/feedback/r.png);
        width: 120px;
        height: 120px;
    }
    
    .photo-panel-2 .arrow-next {
        background: url(/public/mgr/images/feedback/r.png);
        width: 120px;
        height: 120px;
    }
    .photo-panel-3 .arrow-next {
        background: url(/public/mgr/images/feedback/r.png);
        width: 120px;
        height: 120px;
        margin-left: -10px;
    }
    
    .photo-panel .arrow-next:hover {
        background: url(/public/mgr/images/feedback/r_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    
    .photo-panel-2 .arrow-next:hover {
        background: url(/public/mgr/images/feedback/r_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    .photo-panel-3 .arrow-next:hover {
        background: url(/public/mgr/images/feedback/r_ch.png);
        width: 120px;
        height: 120px;
        cursor: pointer;
    }
    
    .feedback_img img {
        width: 80px;
        height: 80px;
    }
    
    .box-title{
        margin-left: 10px;
        padding-top: 10px;
        font-size: 16px;
    }
    
    .jbox-title-icon{
        background: url(/public/mgr/jBox/Skins/Custom/images/jbox-title-icon.png) no-repeat scroll 0px 7px transparent;
        text-indent: 35px;
    }
    
    .photo-panel .photo-box{
        position: relative;
        width: 700px;
        height: 400px;
        margin: 0 auto;
    }
    
    .photo-panel-2 .photo-box{
    position: relative;
    width: 820px;
    height: 500px;
    margin: 0 auto;
    }
    .photo-panel-2 .photo-view-h .photo-box{
    max-width: 825px;
    max-height: 501px;
    height: 561px;
    margin: 10px;
    -moz-box-shadow: 5px 5px 5px #a6a6a6;
    box-shadow: 5px 5px 5px #a6a6a6;
    }
    .photo-panel-3 .photo-view-h .photo-box{
    margin: 10px;
    }
    
    .photo-box div{
        width: 250px;
        height: 35px;
        margin: 0 auto;
    }
    
    .photo-button-x{
        position: absolute;
        bottom: 0;
        z-index: 5;
        width: 250px;
        height: 35px;
        margin: 0 auto;
        padding: 0;
        background: rgba(0,0,0,.6);
        border-radius: 12px 12px 0 0;
    }
    
    .photo-panel-2 .photo-button-x{
        position: absolute;
        bottom: 0;
        z-index: 5;
        width: 250px;
        height: 35px;
        margin: 0 auto;
        padding: 0;
        background: rgba(0,0,0,.6);
        border-radius: 12px 12px 0 0;
    }
    .photo-panel-3 .photo-button-x{
        position: absolute;
        bottom: 0;
        z-index: 5;
        width: 250px;
        height: 35px;
        margin: 0 auto;
        padding: 0;
        background: rgba(0,0,0,.6);
        border-radius: 12px 12px 0 0;
    }
    
    .photo-button{
        position: absolute;
        /* bottom: 0; */
        z-index: 5;
        width: 250px;
        height: 35px;
        margin: 0 auto;
        padding: 0;
        background: rgba(0,0,0,.6);
        border-radius: 12px 12px 0 0;
    }
    
    .photo-button li{
        width: 22px;
        height: 22px;
        margin: 6px 14px;
        list-style: none;
        float: left;
        background: url('/public/mgr/images/feedback/icon.png');
    }
    
    .photo-button .btn1{
        background-position: 22px 0;
    }
    
    .photo-button .btn1:hover{
        background-position: 0 0;
    }
    
    .photo-button .btn2{
        background-position: 22px -21px;
    }
    
    .photo-button .btn2:hover{
        background-position: 0 -21px;
    }
    
    .photo-button .btn3{
        background-position: 22px -42px;
    }
    
    .photo-button .btn3:hover{
        background-position: 0 -42px;
    }
    
    .photo-button .btn4{
        background-position: 22px -63px;
    }
    
    .photo-button .btn4:hover{
        background-position: 0 -63px;
    }
    
    .photo-button .btn5{
        background-position: 22px -84px;
    }
    
    .photo-button .btn5:hover{
        background-position: 0 -84px;
    }
    .photo-button-y {
        position: absolute;
        z-index: 5;
        width: 250px;
        height: 35px;
        margin: 0 auto;
        padding: 0;
        background: rgba(0,0,0,.6);
        border-radius: 12px 12px 0 0;
        margin-top: -35px;
    }
    /************************** 弹出框样式   end***************/
    
    .paginator {background: white;}/* 分页 */
    .combo {
    height: 28px !important;
    border: none;
    border-bottom: 1px #cbcbcb solid;
    margin-top: 2px;
}
    .pather .cont span a {
    color: #e6c684;
    vertical-align: top;
}
    .right_main .table_box {
    overflow: auto;
    /* overflow-y: visible; */
    padding: 0;
    /* margin: 0; */
    width: auto;
}
.space_5{
    margin-top: 5px;
}
.feedback_name_time{
    margin-left: 50px;
          color: #bbb;
     margin-top:5px; }
</style>

<script type="text/javascript">
    $(function () {
        
        var items = $("#totalResult").val();//总条数
        var currentPage = $("#currentPage").val();//当前页
        var showCount = $("#showCount").val();//显示条数
        $("#paginate_box").pagination({
            items : items,
            itemsOnPage : showCount,
            cssStyle : 'light-theme',
            pageListAbled:true,
            pageList:[10,20,50,100,200],
            currentPage : currentPage,
            onPageClick : function(pageNumber, event) {
                //pageNumber:当前页
              $("#currentPage").attr("value", pageNumber);
                $("#search_form").submit();
            }
        });
        
        $("#startDate").datetimepicker({
            lang:'ch',
            timepicker:false,
            format:'Y-m-d',
            formatDate:'Y-m-d',
        });
        $("#endDate").datetimepicker({
            lang:'ch',
            timepicker:false,
            format:'Y-m-d',
            formatDate:'Y-m-d',
        });
        
         var isShowinit = true;
         $("#show_scope").combobox({
                 mode : 'remote',
                url : "@{FeedbackController.getShowScope()}",
                valueField : "code",
                textField : "name",
                onLoadSuccess : function(data) {
                   if(isShowinit){
                           $("#show_scope").combobox("setValue","${feedbackInfo?.show_scope}");
                           
                   }
                   isShowinit = false;
                },
                onChange: function (newValue,oldValue) {
                    /*  if('全部'==newValue){
                      $("input[name='feedbackInfo.show_scope']").val("0");
                     }else if('本管理人'==newValue){
                       $("input[name='feedbackInfo.show_scope']").val("1"); 
                     }else if('其他管理人'==newValue){
                       $("input[name='feedbackInfo.show_scope']").val("2"); 
                     }else if('我'==newValue){
                       $("input[name='feedbackInfo.show_scope']").val("3"); 
                     }else{
                      $("input[name='feedbackInfo.show_scope']").val(newValue);
                     }  */
                }
        });
        
        //鼠标悬浮去掉手势动态图
        $(".feeback_btn").hover(function() {
            $('.fd_gif').attr("src","/public/mgr/images/feedback/fd_4.png");
        }, function() {
            $('.fd_gif').attr("src","/public/mgr/images/feedback/fd_3.gif");
        });
        
    });
    
    //下载专区文件点击事件
     function mydownloadfileOnClick(){
         $('.mydownloadfile').bind('click', function(){
             var tempid=$(this).attr('id');
             $(this).removeAttr('href');
             downloadCenterFile(tempid);
        });
     }
    //下载专区下载
    function downloadCenterFile(fileId){
        $.ajax({
            type : "post",
            url : "@{NoticeController.checkFileIsExsit()}?fileId="+fileId,
            success : function(data){
                if(data.result == "fail"){
                    $.jBox.error(data.msg, "错误");
                }else{
                    $("#upload_form input[name='fileId']").val(fileId);
                    $("#upload_form").submit();
                }
            },
            error : function(){
                $.jBox.error("系统异常，请稍后重试", "错误");
            },
            dataType : "json"
        })
    }
 
    
    function addFeedback(){
        if(${isConfirm}==1){
            window.location.href="@{FeedbackController.predAdFeedback()}";
        }else{
            $.jBox.alert("当前登录的用户未在系统维护实名认证信息，详询0755-86157588-2！","提示");
        }
        
    }
</script>
<div class="pather">
    <div class="cont">
        <div class="bg"><img src="@{'/public/mgr/images/img/pather_bg.png'}"></div>
        <span>首页 <img class="aow" src="/public/mgr/images/img/pather_aow.png">
        <a class="current">需求意见反馈</a>
        </span>
    </div><img class="end" src="@{'/public/mgr/images/img/pather_end.png'}" />
</div>
<div class="space_5"></div>
 <!-- 业务说明 explain_table -->
<div class="mt_0 table_box table_box_1 padding_0 clearfix explain explain_table">
    <div class="bach_box_3 clearfix">
        <div class="title_text explain_click"><span class="explain_text">显示业务说明</span><span class="senior "></span></div>
        <div class="explain_detail explain_detail_stop" style="display: none;">
            <p class="explain_one"></p>
            <p class="title_text explain_ywsm">【业务说明】</p>
            <p class="explain_cont">管理人可在此页面提交使用管理人服务平台的需求意见和建议，参与招商证券托管外包服务用户体验计划，并可在线查看招证托管客服回复的处理情况。</p>
            <p class="title_text">【适用场景】</p>
            <p class="explain_cont">管理人在线反馈使用管理人服务平台的需求意见和建议。</p>
            <p class="title_text">【操作流程】</p>
            <p class="explain_cont">1、管理人选择关注的业务模块，并填写需求意见反馈和联系方式，可以上传图片。</p>
            <p class="explain_cont">2、若招证托管客服有审核、回复，管理人可以在留言板上看到处理结果。</p>
            <p class="title_text">【注意事项】</p>
            <p class="explain_cont">1、只有通过实名认证的用户才能提交需求意见反馈信息，详询0755-86157588-9。</p>
            <p class="explain_cont">2、为了方便我们进行回访，请管理人预留手机号和邮箱等联系方式。</p>
            <p class="explain_cont">3、只有我们审核过后的需求意见留言才会在页面中展示。若留言中有不恰当、非法的评论，我们将予以删除处理。</p>
            <p class="title_text">【办理时间】</p>
            <p class="explain_cont">24小时支持查询。</p>
            <p class="title_text">【办理时效】</p>
            <p class="explain_cont">无。</p>
            <p class="title_text">【结果反馈】</p>
            <p class="explain_cont">无。</p>
            <p class="title_text">【联系方式】</p>
            <p class="explain_cont">如管理人对该功能仍有疑义，请联系：QQ:800157588,电话:0755-86157588-9,邮箱:zztgservice@cmschina.com.cn。</p>
        </div>
    </div>
</div>

<!--表单-->
<div class="form form_box">
    <form action="@{feedbackController.loadFeedbackContentPage()}" method="post" id="search_form">
        <input id="currentPage" name="pageNo" value="${page.currentPage}" type="hidden"/>
        <input id="showCount" name="pageSize" value="${page.showCount}" type="hidden"/>
        <input id="totalPage" name="page.totalPage" value="${page.totalPage}" type="hidden"/>
        <input id="totalResult" name="totalResult" value="${page.totalResult}" type="hidden">
        <input id="businessLineTypeVal" name="businessLineTypeVal" value="${businessLineTypeVal}" type="hidden"/>
        <div class="cont">
            <div class="form_item">
               <div class="text_input">
                     <label>日期</label>
                     <input type='text' id="startDate" name="feedbackInfo.startDate" value="${feedbackInfo.startDate}" style="width:90px;">
                     <span style="font-size: 14px;margin-top: 5px;position: absolute">至</span>
                     <input type='text' id="endDate" name="feedbackInfo.endDate" value="${feedbackInfo.endDate}" style="width:90px;margin-left: 20px;">
               </div>
            </div>
            <div class="form_item">
                <div class="select_box">
                    <label>留言来源</label>
                    <input id='show_scope' type="text" name="feedbackInfo.show_scope" style="width: 212px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <div class="submit_box" style="">
                <button type="submit" class="search_btn" onclick="$('#currentPage').val('1')">查询</button>
                <div class="btn_form">
                    <button type="button" class="feeback_btn" onclick="addFeedback()">我要提意见</button>
                    <img class="fd_gif"     src="/public/mgr/images/feedback/fd_3.gif"></img>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="space_5"></div>
<!--留言内容-->

#{list items:feedbackInfoList , as:'feedInfo'}
#{if feedInfo?.status=='1'}
<div class="form form_box">
    <div class="feedback_content">
            <p class="feedback_name"><span class="feedback_name_p">${feedInfo.feedback_name}</span>
             </p>
            <p class="feedback_question">${feedInfo.feedback_content}</p>
            <div class="feedback_img" id="${feedInfo.feedback_id}">
                    #{if feedInfo?.feedback_img1!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img1}">
                    #{/if}
                    #{if feedInfo?.feedback_img2!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img2}">
                    #{/if}
                    #{if feedInfo?.feedback_img3!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img3}">
                    #{/if}
            </div>
            <div class="feedback_name_time">${feedInfo.feedback_date}</div>
            <HR align=left width=100% color=#dee1e2 SIZE=1 noShade>
            <p class="feedback_answer">|<span class="feedback_title">招证托管客服回复</span></p>
               <p class="feedback_answer_content" tt='${feedInfo.feedback_answer}'></p>
               <p class="feedback_time"><span > ${feedInfo.answer_date}</span></p>
    </div>
</div>
#{/if}
#{if feedInfo?.status=='0'}
<div class="form form_box">
    <div class="feedback_content">
            <p class="feedback_name"><span class="feedback_name_p">${feedInfo.feedback_name}</span> <!-- <span class="feedback_name_time"> ${feedInfo.feedback_date}</span> --></p>
            <p class="feedback_question">${feedInfo.feedback_content}</p>
            <div class="feedback_img" id="${feedInfo.feedback_id}">
                    #{if feedInfo?.feedback_img1!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img1}">
                    #{/if}
                    #{if feedInfo?.feedback_img2!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img2}">
                    #{/if}
                    #{if feedInfo?.feedback_img3!=null}
                        <img src="/public/mgr/${feedInfo?.feedback_img3}">
                    #{/if}
            </div>
            <div class="feedback_name_time">${feedInfo.feedback_date}</div>
    </div>
</div>
#{/if}
#{if feedInfo?.status=='2'}
<div class="form form_box">
    <div class="feedback_content">
            <p class="feedback_name"><span class="feedback_name_p">${feedInfo.feedback_name}</span> <!-- <span class="feedback_name_time">  ${feedInfo.feedback_date}</span> --></p>
             <p class="feedback_answer">|<span class="feedback_title">招证托管客服回复</span></p>
            <p class="feedback_delete">${feedInfo.feedback_answer}</p>
            <div class="feedback_name_time">${feedInfo.answer_date}</div>
    </div>
</div>
#{/if}

#{/list}



<!--翻页-->
<div id="paginate_box" class="page paginator light-theme simple-pagination"></div>


<div class="space_5"></div>
<div class="photo-mask"></div>
<div class="photo-panel">
    <div class="photo-div">
        <div class="photo-left">
            <div class="arrow-prv" onclick="prevPhoto('photo-panel')"></div>
        </div>
        <div class="photo-img">
            <div class="photo-bar .jbox">
                <div class="jbox-title-panel"><p class="box-title jbox-title-icon">图片预览</p><p class="photo-close" /></div>
            </div>
            <div class="photo-view-h">
                <div class="photo-box">
                    <img src="" />
                    <div>
                        <ul class="photo-button photo-button-x">
                            <li class="btn1" onclick="fullScreen('photo-panel')"></li>
                            <li class="btn2" onclick="enlargrImg('photo-panel')"></li>
                            <li class="btn3"></li>
                            <li class="btn4" onclick="rotateImg()"></li>
                            <li class="btn5" onclick="downloadFile('photo-panel')"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="photo-bar">
                <div class="photo-bar-tip">
                     <div class="feedback_img_t">
                        <img src="">
                        <img src="">
                        <img src="">
                        </div>
                </div>
            </div>
        </div>
        <div class="photo-right">
            <div class="arrow-next" onclick="nextPhoto('photo-panel')"></div>
        </div>
    </div>
</div>

<!-- 第二个表单 -->
<div class="photo-panel-2">
    <div class="photo-div">
        <div class="photo-left">
            <div class="arrow-prv" onclick="prevPhoto('photo-panel-2')"></div>
        </div>
        <div class="photo-img">
            <div class="photo-bar .jbox">
                <div class="jbox-title-panel"><p class="box-title jbox-title-icon">图片预览</p><p class="photo-close" /></div>
            </div>
            <div class="photo-view-h">
                <div class="photo-box">
                    <img src="/public/mgr//work/projects_pro/upload/downloadCenter/feedback/b11afc660234433d8aec6e510f2c3d78.jpg" />
                    <div>
                        <ul class="photo-button photo-button-x large">
                            <li class="btn1" onclick="fullScreen('photo-panel-2')"></li>
                            <li class="btn2"></li>
                            <li class="btn3" onclick="smallImg('photo-panel-2')"></li>
                            <li class="btn4" onclick="rotateImg2()"></li>
                            <li class="btn5" onclick="downloadFile('photo-panel-2')"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="photo-bar">
                <div class="photo-bar-tip">
                     <div class="feedback_img_t">
                        <img src="">
                        <img src="">
                        <img src="">
                        </div>
                </div>
            </div>
        </div>
        <div class="photo-right">
            <div class="arrow-next" onclick="nextPhoto('photo-panel-2')"></div>
        </div>
    </div>
</div>

<!-- 第三个表单 -->
<div class="photo-panel-3">
    <div class="photo-div">
        <div class="photo-left">
            <div class="arrow-prv" onclick="prevPhoto('photo-panel-3')"></div>
        </div>
        <div class="photo-img">
            <div  class="photo-bar .jbox">
                <p class="photo-close" />
            </div>
            <div class="photo-view-h">
                <div class="photo-box">
                    <img src="/public/mgr//work/projects_pro/upload/downloadCenter/feedback/b11afc660234433d8aec6e510f2c3d78.jpg" />
                    <div>
                        <ul class="photo-button photo-button-x">
                            <li class="btn1"></li>
                            <li class="btn2"></li>
                            <li class="btn3" onclick="smallImg('photo-panel-3')"></li>
                            <li class="btn4" onclick="rotateImg3()"></li>
                            <li class="btn5" onclick="downloadFile('photo-panel-3')"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="photo-bar" style="display: none">
                <div class="photo-bar-tip">
                     <div class="feedback_img_t">
                        <img src="">
                        <img src="">
                        <img src="">
                        </div>
                </div>
            </div>
        </div>
        <div class="photo-right">
            <div class="arrow-next" onclick="nextPhoto('photo-panel-3')"></div>
        </div>
    </div>
</div>

<!-- 下载表单 -->
<form action="@{NoticeController.downloadFile()}" method="post" id="upload_form">
    <input name="fileId" type="hidden"/>
</form>
<form action="@{FeedbackController.downloadFile()}" method="post" id="upload_form1">
    <input name="fileName" type="hidden"/>
</form>
<script>
    var img_index = 0;
    var img_src = "";
    var img_length=0;
    var img_width= "";
    var img_height="";
    

    $(function() {
        
        //关闭
        $(".photo-close").click(function() {
            $(".photo-mask").hide();
            $(".photo-panel").hide();
            $(".photo-panel-2").hide();
            $(".photo-panel-3").hide();
            $("body").css({"overflow":"auto"});
        });
        //如何调用？
        $(".feedback_img img").click(function() {
            $(".photo-mask").show();
            $(".photo-panel").show();
            
             $("body").css({"overflow":"hidden","height":"100%"});
            
            img_length=$(this).parent().find("img").length;
             for(var i=0;i<$(".feedback_img_t img").length;i++){
                    $(".feedback_img_t img").eq(i).hide();
                }
            for(var i=0;i<$(this).parent().find("img").length;i++){
                img_src = $(this).parent().find("img").eq(i).attr("src");
                $(".feedback_img_t img").eq(i).attr("src", img_src);
                $(".feedback_img_t img").eq(i).show();
            } 
            img_src = $(this).attr("src");
            img_index = $(this).index();
            photoView('photo-panel');
        });
        
        //点击弹出框的图片预览列表--1
        $(".photo-panel .photo-div .photo-img .feedback_img_t img").click(function() {
            $(".photo-mask").show();
            $(".photo-panel").show();
            img_src = $(this).attr("src");
            img_index = $(this).index();
            photoView('photo-panel');
        });
        
        //点击弹出框的图片预览列表--2
        $(".photo-panel-2 .photo-div .photo-img .feedback_img_t img").click(function() {
            $(".photo-panel").hide();
            $(".photo-panel-2").show();
            img_src = $(this).attr("src");
            img_index = $(this).index();
            photoView('photo-panel-2');
        });
        
        //fullScreen();
    });
    
    
    //上一张
    function prevPhoto(id){
        img_index--;
        if(img_index < 0) {
            img_index=0;
            return;
        }
        img_src = $("."+id+" .feedback_img_t img").eq(img_index).attr("src");
        if(id=="photo-panel-3"){
            photoViewFullScreen();
        }else{
            photoView(id);
        }
    }
    //下一张
    function nextPhoto(id){
        img_index++;
        if(img_index >= img_length) {
            img_index=img_length-1;
            return;
        }
        img_src = $("."+id+" .feedback_img_t img").eq(img_index).attr("src");
        
        if(id=="photo-panel-3"){
            photoViewFullScreen();
        }else{
            photoView(id);
        }
    }
    //自适应预览
    function photoView(id) {
        
        num = 0;//设置旋转角度
        
        leftTop(id);
        $("."+id+" .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");
        $("."+id+" .photo-div .photo-img .photo-view-w img").attr("src", img_src);
        
        $("."+id+" .photo-div .photo-img .photo-view-w img").height();
        $("."+id+" .photo-div .photo-img .photo-view-w img").rotate(0);
        $("."+id+" .photo-div .photo-img .photo-view-w img").css("width","");
        $("."+id+" .photo-div .photo-img .photo-view-w img").css("top","");
        $("."+id+" .photo-div .photo-img .photo-view-w img").css("left","");
        $("."+id+" .photo-div .photo-img .photo-view-w img").css("position","");
         $("."+id+" .photo-div .photo-img .photo-view-w img").css("margin-top","");
        $("."+id+" .photo-div .photo-img .photo-view-w img").css("margin-left",""); 
        img_width=$("."+id+"  .photo-div .photo-img .photo-view-w img").width();
        img_height=$("."+id+" .photo-div .photo-img .photo-view-w img").height();
        $("."+id+" .photo-box").css("height",$("."+id+" .photo-div .photo-img .photo-view-w img").height());
        imgIsHidden();
    }
    
    //自适应预览--放大
    function photoViewLarger(id) {
        num = 0;//设置旋转角度
        
         //设置弹出框高度
        leftTop('photo-panel-2');
        
        $(".photo-panel-2 .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");
        $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").attr("src", img_src);
        
        $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").height();
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").rotate(0);
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("width","");
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("top","");
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("left","");
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("position","");
         $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("margin-top","");
        $(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").css("margin-left",""); 
        img_width=$(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").width();
        img_height=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").height();
        $(".photo-panel-2 .photo-box").css("height",$(".photo-panel-2 .photo-div .photo-img  .photo-view-w img").height());
        
    }
    
    //全屏预览
    function photoViewFullScreen(){
        num = 0;//设置旋转角度

        //打开第三个框
         var screenWidth = $(window).width()-20;//屏幕宽度
        var screenHeight = $(window).height()-10;//屏幕高度
        img_width=$(".photo-panel-3 .photo-div .photo-img  img").width();
        img_height=$(".photo-panel-3 .photo-div .photo-img  img").height();
        $(".photo-panel-3 .photo-div .photo-img  img").css("width","");
        $(".photo-panel-3 .photo-div .photo-img  img").css("top","");
        $(".photo-panel-3 .photo-div .photo-img  img").css("left","");
        $(".photo-panel-3 .photo-div .photo-img  img").css("position","");
        $(".photo-panel-3 .photo-div .photo-img  img").css("margin-top","");
        $(".photo-panel-3 .photo-div .photo-img  img").css("margin-left","");
        
        $(".photo-panel-3 .photo-div .photo-img .photo-button").removeClass("photo-button-x");
        $(".photo-panel-3 .photo-div .photo-img .photo-button").addClass("photo-button-y");
        $(".photo-panel-3 .photo-div .photo-img .photo-box").css("height",screenHeight);
    
        
        $(".photo-panel-3 .photo-view-h img").css("height",screenHeight);
        $(".photo-panel-3 .photo-view-h img").css("max-width",screenWidth*0.8);
        $(".photo-panel-3 .photo-img").css("width", 1304);
        $(".photo-panel-3").css("left",(screenWidth-$(".photo-panel-3 .photo-view-h img").width())/2-50);
        
        $(".photo-panel-3 .photo-view-h img").attr("src",img_src);
        $(".photo-panel-3 .photo-view-h img").rotate(0);
        
        //关闭滑动条
        imgIsHidden();
         
    }
    
    
   //弹出框位置剧中
   function leftTop(id){
            //计算居中位置
          var screenWidth = $(window).width();
          var screenHeight = $(window).height();
          var scrolltop = $(document).scrollTop();
          var scrollleft = $(document).scrollLeft();
          var objLeft = (screenWidth - $("."+id).width())/2 ;
          var objTop = (screenHeight - $("."+id+" .photo-img").height())/2 ;
          $("."+id).css({left: objLeft + 'px', top: objTop + 'px'});
   }
    
    //初始化菜单名称
    function menuOnclick(){
        $('.mymenu').each(function(){
            var menuID=$(this).attr('id');
            var $tempthis = $(this);
            $.ajax({
                type : "post",
                url : "@{FAQController.getMenuHerfAjax()}?menuID="+menuID,
                success : function(data){
                    if(data.result == "fail"){
                        $.jBox.error(data.msg, "错误");
                    }else{
                      $tempthis.attr('href',data.menuherf+"");
                      //$tempthis.text(data.nameAll+"");
                    }
                },
                error : function(){
                    $.jBox.error("系统异常，请稍后重试", "错误");
                },
                dataType : "json"
            });
        });
    }
    var num = 0;  
    function rotateImg(){  
        num ++;  
        $(".photo-panel .photo-view-w img").rotate(90*num);
        img_width=$(".photo-panel .photo-view-w img").width();
        img_height=$(".photo-panel .photo-view-w img").height();
        if(num%2==1){
            $(".photo-panel .photo-view-w img").css("width",img_height);
            $(".photo-panel .photo-view-w img").css("top","50%");
            $(".photo-panel .photo-view-w img").css("left","50%");
            $(".photo-panel .photo-view-w img").css("position","absolute");
            img_width=$(".photo-panel .photo-view-w img").width();
            img_height=$(".photo-panel .photo-view-w img").height();
             $(".photo-panel .photo-view-w img").css("margin-top",0-img_height/2);
            $(".photo-panel .photo-view-w img").css("margin-left",0-img_width/2);
            
            $(".photo-panel .photo-button").removeClass("photo-button-y");
            $(".photo-panel .photo-button").addClass("photo-button-x");
            
        }else{
            img_width=$(".photo-panel .photo-view-w img").width();
            img_height=$(".photo-panel .photo-view-w img").height();
            $(".photo-panel .photo-view-w img").css("width","");
            $(".photo-panel .photo-view-w img").css("top","");
            $(".photo-panel .photo-view-w img").css("left","");
            $(".photo-panel .photo-view-w img").css("position","");
             $(".photo-panel .photo-view-w img").css("margin-top","");
            $(".photo-panel .photo-view-w img").css("margin-left","");
            
            $(".photo-panel .photo-button").removeClass("photo-button-x");
            $(".photo-panel .photo-button").addClass("photo-button-y");
        }
        
        $(".photo-panel .photo-box").css("height",$(".photo-panel .photo-view-w img").width());
        imgIsHidden();
    }; 
    
    function rotateImg2(){  
        num ++;  
        $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").rotate(90*num);
        img_width=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").width();
        img_height=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").height();
        if(num%2==1){
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("width",img_height);
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("top","50%");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("left","50%");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("position","absolute");
            img_width=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").width();
            img_height=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").height();
             $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("margin-top",0-img_height/2);
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("margin-left",0-img_width/2);
            
            $(".photo-panel-2 .photo-div .photo-img .photo-button").removeClass("photo-button-y");
            $(".photo-panel-2 .photo-div .photo-img .photo-button").addClass("photo-button-x");
            
        }else{
            img_width=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").width();
            img_height=$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").height();
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("width","");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("top","");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("left","");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("position","");
             $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("margin-top","");
            $(".photo-panel-2 .photo-div .photo-img .photo-view-w img").css("margin-left","");
            
            $(".photo-panel-2 .photo-div .photo-img .photo-button").removeClass("photo-button-x");
            $(".photo-panel-2 .photo-div .photo-img .photo-button").addClass("photo-button-y");
        }
        
        $(".photo-panel-2 .photo-div .photo-img .photo-box").css("height",$(".photo-panel-2 .photo-div .photo-img .photo-view-w img").width());
        imgIsHidden();
    }; 
    
    function rotateImg3(){  
        num ++;  
        $(".photo-panel-3 .photo-div .photo-img  img").rotate(90*num);
        img_width=$(".photo-panel-3 .photo-div .photo-img  img").width();
        img_height=$(".photo-panel-3 .photo-div .photo-img  img").height();
         var screenWidth = $(window).width()-20;//屏幕宽度
         var screenHeight = $(window).height()-10;//屏幕高度
        if(num%2==1){
            $(".photo-panel-3 .photo-div .photo-img  img").css("width",img_height);
            $(".photo-panel-3 .photo-div .photo-img  img").css("top","50.5%");
            $(".photo-panel-3 .photo-div .photo-img  img").css("position","absolute");
            img_width=$(".photo-panel-3 .photo-div .photo-img  img").width();
            img_height=$(".photo-panel-3 .photo-div .photo-img  img").height();
             $(".photo-panel-3 .photo-div .photo-img  img").css("margin-top",0-img_height/2);
            $(".photo-panel-3 .photo-div .photo-img  img").css("margin-left",0-img_width/2);
            
            $(".photo-panel-3 .photo-div .photo-img .photo-button").removeClass("photo-button-y");
            $(".photo-panel-3 .photo-div .photo-img .photo-button").addClass("photo-button-x");
            isIE();
            
        }else{
            img_width=$(".photo-panel-3 .photo-div .photo-img  img").width();
            img_height=$(".photo-panel-3 .photo-div .photo-img  img").height();
            $(".photo-panel-3 .photo-div .photo-img  img").css("width","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("top","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("left","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("position","");
             $(".photo-panel-3 .photo-div .photo-img  img").css("margin-top","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("margin-left","");
            
            $(".photo-panel-3 .photo-div .photo-img .photo-button").removeClass("photo-button-x");
            $(".photo-panel-3 .photo-div .photo-img .photo-button").addClass("photo-button-y");
        }
        
        $(".photo-panel-3 .photo-div .photo-img .photo-box").css("height",screenHeight);
        imgIsHidden();
    }; 
    
    //缩小
    function smallImg(id){
        //打开第一个框
        $(".photo-mask").show();
        $("."+id).hide();
        $(".photo-panel").show();
        for(var i=0;i<$(".photo-panel .feedback_img_t img").length;i++){
                $(".photo-panel .feedback_img_t img").eq(i).hide();
            }
        for(var i=0;i<$("."+id+" .feedback_img_t img").length;i++){
            img_src = $("."+id+" .feedback_img_t img").eq(i).attr("src");
            $(".photo-panel .feedback_img_t img").eq(i).attr("src", img_src);
            $(".photo-panel .feedback_img_t img").eq(i).show();
            if(img_src==$("."+id+" .photo-box img").attr("src")){
                img_index=i;
            }
        }
        img_src = $("."+id+" .photo-box img").attr("src");
        //img_index = $("."+id+" .photo-box img").index();
        photoView('photo-panel');
        
    }
    
    //放大
    function enlargrImg(id){
        //打开第二个框
        $(".photo-mask").show();
        $("."+id).hide();
        $(".photo-panel-2").show();
        for(var i=0;i<$(".photo-panel-2 .feedback_img_t img").length;i++){
                $(".photo-panel-2 .feedback_img_t img").eq(i).hide();
            }
        for(var i=0;i<$("."+id+" .feedback_img_t img").length;i++){
            img_src = $("."+id+" .feedback_img_t img").eq(i).attr("src");
            $(".photo-panel-2 .feedback_img_t img").eq(i).attr("src", img_src);
            $(".photo-panel-2 .feedback_img_t img").eq(i).show();
            if(img_src==$("."+id+" .photo-box img").attr("src")){
                img_index=i;
            }
        }
        img_src = $("."+id+" .photo-box img").attr("src");
        photoView('photo-panel-2');
    }
    
    //全屏
        function fullScreen(id){
            
            img_width=$(".photo-panel-3 .photo-div .photo-img  img").width();
            img_height=$(".photo-panel-3 .photo-div .photo-img  img").height();
            var screenWidth = $(window).width()-20;//屏幕宽度
            var screenHeight = $(window).height()-10;//屏幕高度
            $(".photo-panel-3 .photo-div .photo-img  img").css("width","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("top","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("left","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("position","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("margin-top","");
            $(".photo-panel-3 .photo-div .photo-img  img").css("margin-left","");
            
            $(".photo-panel-3 .photo-div .photo-img .photo-button").removeClass("photo-button-x");
            $(".photo-panel-3 .photo-div .photo-img .photo-button").addClass("photo-button-y");
            $(".photo-panel-3 .photo-div .photo-img .photo-box").css("height",screenHeight);
        
            //打开第三个框
            $(".photo-mask").show();
            $(".photo-panel-3").show();
            $("."+id).hide();
             
            $(".photo-panel-3 .photo-view-h img").css("height",screenHeight);
            $(".photo-panel-3 .photo-view-h img").css("max-width",screenWidth*0.8);
            $(".photo-panel-3 .photo-img").css("width", 1304);
            $(".photo-panel-3").css("left",(screenWidth-$(".photo-panel-3 .photo-view-h img").width())/2-50);
            
            for(var i=0;i<$(".photo-panel-3 .feedback_img_t img").length;i++){
                    $(".photo-panel-3 .feedback_img_t img").eq(i).hide();
                }
            for(var i=0;i<$("."+id+" .feedback_img_t img").length;i++){
                img_src = $("."+id+" .feedback_img_t img").eq(i).attr("src");
                $(".photo-panel-3 .feedback_img_t img").eq(i).attr("src", img_src);
                $(".photo-panel-3 .feedback_img_t img").eq(i).show();
                if(img_src==$("."+id+" .photo-box img").attr("src")){
                    img_index=i;
                }
            }
            img_src = $("."+id+" .photo-box img").attr("src");
            //img_index = $("."+id+" .photo-box img").index();
            $(".photo-panel-3 .photo-view-h img").attr("src",img_src);
            $(".photo-panel-3 .photo-view-h img").rotate(0);
            
            //关闭滑动条
            imgIsHidden();
    }
    
    
    window.onload = function(){
        $(".feedback_answer_content").each(function(index,element){
                $(this).html($(this).attr('tt'));
        });
        $(".feedback_delete").each(function (index,element){
            if($(this).html().indexOf("【温馨提示】")!=-1){
                $(this).addClass("feedback_delete_text");
            }else{
                
            }
        });
        //文件下载点击事件
        mydownloadfileOnClick();
        menuOnclick();
        imgIsHidden();
        
    }
    
    //判断预览弹出框是否打开
    function imgIsHidden(){
        if(!$(".photo-mask").is(":hidden")){
            $("body").css({"overflow":"hidden","height":"100%"});     //如果元素为显现,则将滑动条隐藏
          }
    }
  //下载文件
    function downloadFile(id){
        var fileName=$("."+id+" .feedback_img_t img").attr("src");
        $.ajax({
            type : "post",
            url : "@{FeedbackController.checkLowsFileIsExsit()}?fileName="+fileName,
            success : function(data){
                if(data.result == "fail"){
                    $.jBox.error(data.msg, "错误");
                }else{
                    $("#upload_form1 input[name='fileName']").val(data.fileName);
                    $("#upload_form1").submit();
                }
            },
            error : function(){
                $.jBox.error("系统异常，请稍后重试", "错误");
            },
            dataType : "json"
        })
    }
     function isIE(){
            if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/8./i)=="8." || navigator.appVersion.match(/9./i)=="9." ||navigator.appVersion.match(/9./i)=="10." || navigator.appVersion.match(/8./i)=="11.")) 
            { 
                $(".photo-panel-3 .photo-div .photo-img  img").css("width","");
                $(".photo-panel-3 .photo-div .photo-img  img").css("top","");
                $(".photo-panel-3 .photo-div .photo-img  img").css("left","");
                $(".photo-panel-3 .photo-div .photo-img  img").css("position","");
                $(".photo-panel-3 .photo-div .photo-img  img").css("margin-top","");
                $(".photo-panel-3 .photo-div .photo-img  img").css("margin-left","");
            } 
            
            
    }
</script>