js的函数代码块
//图片回显预览，查看图片 --#start
var showImg_wc_solveProblem = {
imgData: [], //图片数组 [{fileName:"123.jpg", fileUrl:"abc/123.jpg"},{fileName:"123.jpg", fileUrl:"abc/123.jpg"}]
indexImg: 0, //第几张图片
imgRotate: 0, //旋转角度
thisObj: "", //图片回显model的id
initEvent: function (obj, data) {
var me = this;
me.imgData = data; //图片数组
me.indexImg = 0; //第几张图片
me.imgRotate = 0; //旋转角度
obj = obj || me.thisObj;
me.thisObj = obj;
if (me.imgData.length == 1) {
$(obj + ' .js_imgNext').css('color', 'gray');
$(obj + ' .js_imgNext').attr("title", "已经是最后一张");
} else {
$(obj + ' .js_imgNext').attr('href', 'javascript:;');
$(obj + ' .js_imgNext').css('color', 'rgb(42, 100, 150)');
}
$(obj + ' .imgName').text(me.imgData[0].fileName);
$(obj + ' .js_imgSrc').attr("src", me.imgData[0].fileUrl);
$(obj + ' .js_imgSrc').css("position", 'static');
$(obj + ' .js_imgSrc').css("width", '40%');
$(obj + ' .js_imgPrev').css('color', 'gray');
$(obj + ' .js_imgPrev').attr("title", "已经是第一张");
$(obj + ' .modal-body').css("height", window.screen.height * 0.7);
$(obj + ' p').css("line-height", window.screen.height * 0.7 - 30 + "px");
$(obj).modal("show");
//上一张
$(obj + ' .js_imgPrev').unbind().click(function () {
if (me.indexImg <= 0) {
return;
} else {
$(obj + ' .js_imgSrc').get(0).style.width = 40 + '%';
$(obj + ' .imgName').text(me.imgData[me.indexImg - 1].fileName);
$(obj + ' img').attr("src", me.imgData[me.indexImg - 1].fileUrl);
me.indexImg = me.indexImg - 1;
$(obj + ' .js_imgNext').css("color", "#2a6496");
$(obj + ' .js_imgNext').attr("href", "javascript:;");
if (me.indexImg == 0) {
$(obj + ' .js_imgPrev').css("color", "gray");
$(obj + ' .js_imgPrev').attr("title", "已经是第一张");
$(obj + ' .js_imgPrev').removeAttr("href");
}
me.imgRotate = 0;
rotateExec(me.imgRotate)
}
})
//下一张
$(obj + ' .js_imgNext').unbind().click(function () {
if (me.indexImg >= me.imgData.length - 1) {
return;
} else {
$(obj + ' .js_imgSrc').get(0).style.width = 40 + '%';
$(obj + ' .imgName').text(me.imgData[me.indexImg + 1].fileName);
$(obj + ' img').attr("src", me.imgData[me.indexImg + 1].fileUrl);
me.indexImg = me.indexImg + 1;
$(obj + ' .js_imgPrev').css("color", "#2a6496");
$(obj + ' .js_imgPrev').attr("href", "javascript:;");
if (me.indexImg == me.imgData.length - 1) {
$(obj + ' .js_imgNext').css("color", "gray");
$(obj + ' .js_imgNext').attr("title", "已经是最后一张");
$(obj + ' .js_imgNext').removeAttr("href");
}
me.imgRotate = 0;
rotateExec(me.imgRotate)
}
})
//放大图片按钮
$(obj + ' .js_imgLarge').unbind().click(function () {
var width = parseInt($(obj + ' .js_imgSrc').get(0).style.width);
if (width != 150) {
width += 10;
$(obj + ' .js_imgSrc').get(0).style.width = width + '%';
}
})
//缩小图片按钮
$(obj + ' .js_imgSmall').unbind().click(function () {
var width = parseInt($(obj + ' .js_imgSrc').get(0).style.width);
if (width != 40) {
width -= 10;
$(obj + ' .js_imgSrc').get(0).style.width = width + '%';
}
})
//还原图片按钮
$(obj + ' .js_imgReturn').unbind().click(function () {
me.imgRotate = 0;
rotateExec(me.imgRotate)
$(obj + ' .js_imgSrc').get(0).style.width = 40 + '%';
$(obj + ' .js_imgSrc').css("position", "static");
})
$(obj + ' .js_imgReturn').click(); //初始时显示时还原一下
//左旋转按钮
$(obj + ' .js_imgRotateLeft').unbind().click(function () {
me.imgRotate -= 90;
rotateExec(me.imgRotate)
})
//右旋转按钮
$(obj + ' .js_imgRotateRight').unbind().click(function () {
me.imgRotate += 90;
rotateExec(me.imgRotate)
})
//旋转图片
function rotateExec(R) {
console.log(R)
R = R % 360;
if (R < 0) {
R = R + 360
}
$(obj + ' .js_imgSrc').removeClass('rotate_0').removeClass('rotate_90').removeClass('rotate_180').removeClass(
'rotate_270').addClass('rotate_' + R);
}
//鼠标移进显示按钮
$(obj + ' .modal-body').mouseover(function () {
$(obj + ' .js_imgNext').show();
$(obj + ' .js_imgPrev').show();
$(obj + ' .operatorDiv').show();
})
//鼠标移出隐藏按钮
$(obj + ' .modal-body').mouseout(function () {
$(obj + ' .js_imgNext').hide();
$(obj + ' .js_imgPrev').hide();
$(obj + ' .operatorDiv').hide();
})
},
wheelEvent: function (obj, event) { //鼠标滚- 图片放大缩小
var me = this;
obj = obj || me.thisObj;
me.thisObj = obj;
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', me.wheelEvent, false);
}
var delta = 0;
if (!event) {
event = window.event
}
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) {
delta = -delta
}
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) {
changeImg(delta)
}
function changeImg(delta) {
var width = parseInt($(obj + ' .js_imgSrc').get(0).style.width, 10) || 40;
width += delta * 10;
if (width >= 40 && width <= 150) {
$(obj + ' .js_imgSrc').get(0).style.width = width + '%';
} else {
return false;
}
}
} //end wheelEvent
} //end showImg
//图片回显预览，查看图片 --#end
html弹出模态框
<!-- 点击新增里面弹出弹框 -->
<%-- 图片回显预览dom start--%>
<div class="modal fade" id="pictureModal_wc_solveProblem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" style="width:1000px;">
<div class="modal-content">
<div class="modal-body" style="overflow: hidden;" onselectstart="return false">
<span class="imgName"></span>
<a class="closeBtn icon-remove-circle" data-dismiss="modal"></a>
<a class="js_imgPrev icon-chevron-left" style="left:30px"></a>
<a class="js_imgNext icon-chevron-right" style="right: 30px;"></a>
<div class="operatorDiv">
<a title="放大" class="js_imgLarge icon-zoom-in"></a>
<a title="缩小" class="js_imgSmall icon-zoom-out"></a>
<a title="还原" class="js_imgReturn icon-refresh"></a>
<a title="左旋转" class="js_imgRotateLeft icon-undo" style="background:none;"></a>
<a title="右旋转" class="js_imgRotateRight icon-repeat"></a>
</div>
<p style="text-align: center;"><img class="easyui-draggable js_imgSrc" src="" onmousewheel='showImg_wc_solveProblem.wheelEvent("#pictureModal_wc_solveProblem",event)' /></p>
</div>
</div>
</div>
</div>
<%-- 图片回显预览dom end--%>
css的图片样式和模态框样式
/* 图片样式 #start */
#pictureModal_wc_solveProblem a:hover{text-decoration: none;}
#pictureModal_wc_solveProblem a:focus{outline: none;}
#pictureModal_wc_solveProblem .js_imgNext,#pictureModal_wc_solveProblem .js_imgPrev{position: absolute;top: 46%;z-index: 1000;font-size: 43px;cursor: pointer;color: rgb(42, 100, 150);display: none;}
#pictureModal_wc_solveProblem .operatorDiv{position: absolute;bottom: 0;left: 35.5%;background: rgb(83, 75, 75);padding: 13px 20px;z-index:1000;display: none;}
#pictureModal_wc_solveProblem .operatorDiv a{font-size: 20px;color: #ffffff;padding: 15px;}
#pictureModal_wc_solveProblem .closeBtn{font-size: 30px;cursor: pointer;position: absolute;right: 15px;z-index: 1000;}
#pictureModal_wc_solveProblem .rotate_0{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
#pictureModal_wc_solveProblem .rotate_90{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
#pictureModal_wc_solveProblem .rotate_180{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate (180deg);transform: rotate(180deg);}
#pictureModal_wc_solveProblem .rotate_270{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate (270deg);transform: rotate(270deg);}
/* 图片样式 #end */
调用方法
pictureModal_wc_solveProblem 这个是模态框的id
showImg_wc_solveProblem.initEvent('#pictureModal_wc_solveProblem', consumbaleImgList_more)
consumbaleImgList_more这个是传递的参数，其参数格式为
consumbaleImgList_more = [{fileName: "微信图片_20181028110426.jpg", fileUrl: "/usr/mema/doc/workCard/20181205/"}]
效果图如下：
