關於一項圖片顯示彈框的小插件

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/"}]

效果圖如下：