You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
18 KiB
457 lines
18 KiB
(function (window, document) { |
|
var ImgView = function (targetDom, options,listTargetDom) { |
|
// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了 |
|
if (!(this instanceof ImgView)) return new ImgView(targetDom, options,listTargetDom); |
|
// 参数 |
|
this.options = this.extend({ |
|
dataList: [],//[{src:"",isSelected:false}] |
|
currentSrc: "" |
|
}, options); |
|
// 获取dom |
|
this.targetDom = document.getElementById(targetDom); |
|
this.listTargetDom = document.getElementById(listTargetDom); |
|
if(this.options.dataList.length>0) |
|
{ |
|
this.options.currentSrc=this.options.dataList[0].AttachLocationPath; |
|
} |
|
var html = "<div id='imgViewContent' class='img-view-content' draggable>" + |
|
"<img id='dialogImg' class='dialog-img' src=''></div>"; |
|
var listHtml="<div id='imgs-container'>" |
|
for(var i=0;i<this.options.dataList.length;i++) |
|
{ |
|
if(this.options.dataList[i].isCheck){ |
|
listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+ |
|
"<img class='smallImg' style='border:3px solid red' src='"+this.options.dataList[i].AttachLocationPath+"' />"+ |
|
"</div>"; |
|
|
|
}else{ |
|
listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+ |
|
"<img class='smallImg' src='"+this.options.dataList[i].AttachLocationPath+"' />"+ |
|
"</div>"; |
|
} |
|
} |
|
listHtml+="</div>"; |
|
this.listTargetDom.innerHTML=listHtml; |
|
this.targetDom.innerHTML = html; |
|
this.btnClose = document.getElementById("closeDialog"); |
|
this.btnRotate = document.getElementById("rotateDialog"); |
|
this.btnPrev = document.getElementById("prevDialog"); |
|
this.btnNext = document.getElementById("nextDialog"); |
|
//this.imgViewDiv = document.getElementById("imgViewDiv"); |
|
this.imgViewContent = document.getElementById("imgViewContent"); |
|
this.dialogImg = document.getElementById("dialogImg"); |
|
this.imgIdx=document.getElementById("imgIdx") |
|
this.imgCount=document.getElementById("imgCount") |
|
this.imgListContainer=document.getElementById("imgs-container") |
|
this.num = 0; |
|
this.winWidth = 0; |
|
this.winHeight = 0; |
|
this.startX = 0, this.startY = 0, this.x = 0, this.y = 0; |
|
this.index = 1; |
|
this.ScrollVal=0; |
|
var wsImpl = window.WebSocket || window.MozWebSocket; |
|
this.Socket=new wsImpl('ws://localhost:7080/'); |
|
|
|
|
|
this.event(); |
|
} |
|
ImgView.prototype = { |
|
init: function (options) { |
|
this.options.dataList=options; |
|
|
|
if(this.options.dataList.length>0) |
|
{ |
|
this.options.currentSrc=this.options.dataList[0].AttachLocationPath; |
|
} |
|
var html = "<div id='imgViewContent' class='img-view-content' draggable>" + |
|
"<img id='dialogImg' class='dialog-img' src=''></div>"; |
|
var listHtml="<div id='imgs-container'>" |
|
for(var i=0;i<this.options.dataList.length;i++) |
|
{ |
|
if(this.options.dataList[i].isCheck){ |
|
listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+ |
|
"<img class='smallImg' style='border:3px solid red' src='"+this.options.dataList[i].AttachLocationPath+"' />"+ |
|
"</div>"; |
|
|
|
}else{ |
|
listHtml+="<div id='smallImgBox' class='swiper-box' data-id='3'>"+ |
|
"<img class='smallImg' src='"+this.options.dataList[i].AttachLocationPath+"' />"+ |
|
"</div>"; |
|
} |
|
} |
|
listHtml+="</div>"; |
|
this.listTargetDom.innerHTML=listHtml; |
|
this.imgIdx=document.getElementById("imgIdx") |
|
this.imgCount=document.getElementById("imgCount") |
|
this.imgListContainer=document.getElementById("imgs-container") |
|
this.event(); |
|
}, |
|
extend: function (obj, obj2) { |
|
for (var k in obj2) { |
|
obj[k] = obj2[k]; |
|
} |
|
return obj; |
|
}, |
|
event: function () { |
|
var _this = this; |
|
_this.thisSrc = _this.options.currentSrc; |
|
//var dataList = _this.options.dataList; |
|
//var index = dataList.indexOf(_this.thisSrc); |
|
_this.checkImg(_this.options.currentSrc); |
|
// // 关闭 |
|
// _this.btnClose.addEventListener("click", function () { |
|
// _this.close(_this); |
|
// }); |
|
// 旋转 |
|
// _this.btnRotate.addEventListener("click", function () { |
|
// _this.rotate(_this); |
|
// }); |
|
// // 上一张 |
|
// _this.btnPrev.addEventListener("click", function () { |
|
// _this.prev(_this); |
|
// }); |
|
// // 下一张 |
|
// _this.btnNext.addEventListener("click", function () { |
|
// _this.next(_this); |
|
// }); |
|
// 鼠标按下 |
|
_this.imgViewContent.addEventListener("mousedown", function (event) { |
|
_this.mousedown(_this, event); |
|
}); |
|
// 滚轮事件 chrome & ie |
|
_this.imgViewContent.addEventListener("mousewheel", function (event) { |
|
_this.mousewheel(_this, event); |
|
}); |
|
// 滚轮事件 firefox |
|
_this.imgViewContent.addEventListener("DOMMouseScroll", function (event) { |
|
_this.mousewheel(_this, event); |
|
}); |
|
var smallImgDom = document.getElementsByClassName("smallImg"); |
|
for(var i=0;i<smallImgDom.length;i++) |
|
{ |
|
smallImgDom[i].addEventListener("mouseover",function(event){ |
|
_this.setSrc(_this,this.src); |
|
//this.style.border="1px solid rgb(250,0,255)" |
|
}) |
|
smallImgDom[i].addEventListener("click",function(event){ |
|
var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(this.src)); |
|
imgObj.isCheck=!imgObj.isCheck; |
|
if(imgObj.isCheck) |
|
{ |
|
this.style.border="3px solid red" |
|
}else |
|
{ |
|
this.style.border="0px solid red" |
|
} |
|
_this.Socket.send(JSON.stringify(imgObj)) |
|
}) |
|
} |
|
}, |
|
// 滚轮事件 |
|
mousewheel: function (_this, event) { |
|
event.preventDefault(); |
|
var delta = (event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie |
|
(event.detail != 0 && (event.detail > 0 ? -1 : 1)); |
|
if (delta > 0) { |
|
// 向上滚 |
|
_this.index = _this.index + 0.5; |
|
if (_this.index > 4) { |
|
_this.index = 4; |
|
} |
|
|
|
} else if (delta < 0) { |
|
// 向下滚 |
|
_this.index = _this.index - 0.5; |
|
if (_this.index < 0.5) { |
|
_this.index = 0.5; |
|
} |
|
} |
|
_this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px"; |
|
_this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px"; |
|
event.target.style.width = _this.imgWidth * _this.index + "px"; |
|
event.target.style.height = _this.imgHeight * _this.index + "px"; |
|
}, |
|
zoom:function(_this,t){ |
|
if(t>0) |
|
{ |
|
_this.index = _this.index + 0.5; |
|
if (_this.index > 4) { |
|
_this.index = 4; |
|
} |
|
}else if(t==0){ |
|
_this.index=1; |
|
}else if(t<0) |
|
{ |
|
_this.index = _this.index - 0.5; |
|
if (_this.index < 0.5) { |
|
_this.index = 0.5; |
|
} |
|
} |
|
_this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px"; |
|
_this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px"; |
|
_this.dialogImg.style.width = _this.imgWidth * _this.index + "px"; |
|
_this.dialogImg.style.height = _this.imgHeight * _this.index + "px"; |
|
}, |
|
// 鼠标按下事件(拖拽用) |
|
mousedown: function (_this, event) { |
|
event.preventDefault(); |
|
var imgWidth = _this.imgWidth * _this.index; |
|
var imgHeight = _this.imgHeight * _this.index; |
|
var rotateNum = _this.num * 90; |
|
// 根据旋转的角度不同，坐标也不一样 |
|
if (rotateNum % 90 == 0 && rotateNum % 180 != 0 && rotateNum % 270 != 0 && rotateNum % 360 != 0) { |
|
_this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY; |
|
_this.startY = event.offsetX - (imgWidth - imgHeight) / 2; |
|
} else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) { |
|
_this.startX = imgWidth - event.offsetX; |
|
_this.startY = imgHeight - event.offsetY; |
|
} else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) { |
|
_this.startX = (imgWidth - imgHeight) / 2 + event.offsetY; |
|
_this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2; |
|
} else { |
|
_this.startX = event.offsetX; |
|
_this.startY = event.offsetY; |
|
} |
|
document.addEventListener('mousemove', mousemove); |
|
document.addEventListener('mouseup', mouseup); |
|
// 拖拽 |
|
function mousemove(event) { |
|
_this.y = event.clientY - _this.startY - 10; |
|
_this.x = event.clientX - _this.startX - 10; |
|
_this.imgViewContent.style.marginTop = "" + _this.y + "px"; |
|
_this.imgViewContent.style.marginLeft = "" + _this.x + "px"; |
|
_this.imgViewContent.style.transition = "margin 0s"; |
|
}; |
|
// 鼠标放开 |
|
function mouseup() { |
|
document.removeEventListener('mousemove', mousemove); |
|
document.removeEventListener('mouseup', mouseup); |
|
_this.imgViewContent.style.transition = "all 0.6s"; |
|
} |
|
}, |
|
// 关闭 |
|
close: function (_this) { |
|
var imgViewDiv = document.getElementById("imgViewDiv"); |
|
imgViewDiv.setAttribute("class", "img-view-dialog closing"); |
|
setTimeout(function () { |
|
imgViewDiv.setAttribute("class", "img-view-dialog"); |
|
imgViewDiv.style.display = "none"; |
|
_this.num = 0; |
|
}, 400); |
|
}, |
|
// 旋转 |
|
rotate: function (_this, angle) { |
|
_this.num += angle; |
|
_this.imgViewContent.style.transform = "rotate(" + _this.num + "deg) scale(1, 1)"; |
|
}, |
|
// 适合屏幕 |
|
full: function (_this) { |
|
_this.dialogImg.style.cssText = "width:" + _this.winWidth + "px; height:" + _this.winHeight + "px;"; |
|
_this.imgViewContent.style.cssText = "margin-top:" + 0 + "px; margin-left:" + 0 + "px"; |
|
}, |
|
// 上一张 |
|
prev: function (_this) { |
|
var thisSrc = _this.dialogImg.src; |
|
var dataList = _this.options.dataList; |
|
var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc)); |
|
var index = dataList.indexOf(imgObj); |
|
if (index > 0 && index <= (dataList.length - 1)) { |
|
index = index - 1; |
|
_this.checkImg(dataList[index].AttachLocationPath, index); |
|
} |
|
}, |
|
// 上一张 |
|
next: function (_this) { |
|
var thisSrc = _this.dialogImg.src; |
|
var dataList = _this.options.dataList; |
|
var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc)); |
|
var index = dataList.indexOf(imgObj); |
|
if (index >= 0 && index < (dataList.length - 1)) { |
|
index = index + 1; |
|
_this.checkImg(dataList[index].AttachLocationPath, index); |
|
} |
|
}, |
|
// 上一张 |
|
setSelected: function (_this,fjmc,state) { |
|
var thisSrc = fjmc; |
|
var smallImgDom = document.getElementsByClassName("smallImg"); |
|
for(var i=0;i<smallImgDom.length;i++) |
|
{ |
|
if(new RegExp(thisSrc + '$').test(smallImgDom[i].src)){ |
|
if(state) |
|
{ |
|
smallImgDom[i].style.border="3px solid red" |
|
}else |
|
{ |
|
smallImgDom[i].style.border="0px solid red" |
|
} |
|
} |
|
} |
|
}, |
|
// 全选 |
|
SelecteAll: function (_this) |
|
{ |
|
var smallImgDom = document.getElementsByClassName("smallImg"); |
|
var selectcount=0; |
|
var Selected=0; |
|
for(var i=0;i<smallImgDom.length;i++) |
|
{ |
|
if(smallImgDom[i].style.border=="3px solid red") |
|
{ |
|
selectcount++; |
|
} |
|
} |
|
for(var i=0;i<smallImgDom.length;i++) |
|
{ |
|
if(selectcount!=smallImgDom.length) |
|
{ |
|
smallImgDom[i].style.border="3px solid red" |
|
Selected=1; |
|
}else |
|
{ |
|
smallImgDom[i].style.border="0px solid red" |
|
Selected=0; |
|
} |
|
} |
|
for(var i=0;i<this.options.dataList.length;i++) |
|
{ |
|
this.options.dataList[i].isCheck = Selected == 1 |
|
} |
|
_this.Socket.send("SelecteAll:"+Selected) |
|
}, |
|
//全屏查看 |
|
FullScreen: function (_this) |
|
{ |
|
var thisSrc = _this.dialogImg.src; |
|
var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc)); |
|
if(_this.Socket.readyState==1){ |
|
_this.Socket.send("FullScreen:"+JSON.stringify(imgObj)) |
|
} |
|
}, |
|
// 上一张 |
|
setScroll: function (_this,a) { |
|
var _w=(_this.options.dataList.length*68)+(_this.options.dataList.length*8); |
|
_this.imgListContainer.style.width=_w+"px"; |
|
if(_w<_this.winWidth){ |
|
_this.imgListContainer.style.left="0px"; |
|
}else |
|
{ |
|
var _c=_w-_this.winWidth; |
|
var _cn=_c/76; |
|
if(a>0&&_c>_this.ScrollVal){ |
|
_this.ScrollVal+=_w/_this.options.dataList.length; |
|
_this.imgListContainer.style.left=_this.ScrollVal*-1+"px"; |
|
}else if(a<0) |
|
{ |
|
_this.ScrollVal-=_w/_this.options.dataList.length; |
|
if(_this.ScrollVal<0) |
|
_this.ScrollVal=0 |
|
} |
|
_this.imgListContainer.style.left=_this.ScrollVal*-1+"px"; |
|
} |
|
//alert(_this.imgListContainer); |
|
//var thisSrc = _this.dialogImg.src; |
|
//var dataList = _this.options.dataList; |
|
//var index = dataList.indexOf(thisSrc); |
|
//if (index >= 0 && index < (dataList.length - 1)) { |
|
// index = index + 1; |
|
// _this.checkImg(dataList[index], index); |
|
//} |
|
}, |
|
// 下一张 |
|
setSrc: function (_this, src) { |
|
// var dialogImg = document.getElementById("dialogImg"); |
|
// var thisSrc = dialogImg.attributes[2].value; |
|
// if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) { |
|
// thisSrc = dialogImg.attributes[3].value; |
|
// } |
|
// var dataList = _this.options.dataList; |
|
// var index = dataList.indexOf(thisSrc); |
|
// if (index >= 0 && index < (dataList.length - 1)) { |
|
// index = index + 1; |
|
// _this.checkImg(dataList[index]); |
|
// } |
|
_this.checkImg(src); |
|
}, |
|
// 点击图片 |
|
checkImg: function (thisSrc) { |
|
var _this = this; |
|
_this.index = 1; |
|
_this.num = 0; |
|
_this.dialogImg.style.transform = ""; |
|
_this.imgViewContent.setAttribute("class", "img-view-content"); |
|
_this.getWindowWH(); |
|
/* if (index == 0) { |
|
_this.btnPrev.style.display = "none"; |
|
} else if (index == (dataList.length - 1)) { |
|
_this.btnNext.style.display = "none"; |
|
} else { |
|
_this.btnPrev.style.display = "block"; |
|
_this.btnNext.style.display = "block"; |
|
} */ |
|
var image = new Image(); |
|
image.src = thisSrc; |
|
var width = _this.winWidth;//image.width; |
|
var height = _this.winHeight;//image.height; |
|
// var ww = 860; |
|
// var wh = _this.winHeight - 20; |
|
// if (width < ww && height < wh) { |
|
// width = width; |
|
// height = height; |
|
// } else { |
|
// var scale_x = width / ww; |
|
// var scale_y = height / wh; |
|
// if (scale_x > scale_y) { |
|
// var width = ww; |
|
// var height = parseInt(height / scale_x); |
|
// } else { |
|
// var width = parseInt(width / scale_y); |
|
// var height = wh; |
|
// } |
|
// } |
|
_this.imgWidth = width; |
|
_this.imgHeight = height; |
|
var left = 0;//(_this.winWidth - width) / 2; |
|
var top = 0;//(_this.winHeight - height) / 2; |
|
_this.imgMarginLeft = left; |
|
_this.imgMarginTop = top; |
|
_this.imgViewContent.style.cssText = "margin-top:" + top + "px; margin-left:" + left + "px"; |
|
_this.dialogImg.style.cssText = "width:" + width + "px; height:" + height + "px;"; |
|
_this.dialogImg.setAttribute("src", thisSrc); |
|
_this.imgViewContent.setAttribute("class", "img-view-content loadingImg"); |
|
//setTimeout(function () { |
|
//_this.dialogImg.setAttribute("src", thisSrc); |
|
//_this.imgViewContent.setAttribute("class", "img-view-content loadingImg"); |
|
//}, 600); |
|
|
|
var thisSrc = _this.dialogImg.src; |
|
var dataList = _this.options.dataList; |
|
var imgObj=_this.options.dataList.find(item=>new RegExp(item.FJMC + '$').test(thisSrc)); |
|
var index = dataList.indexOf(imgObj); |
|
_this.imgIdx.innerText=index+1; |
|
_this.imgCount.innerText=dataList.length; |
|
if(_this.Socket.readyState==1){ |
|
_this.Socket.send("Next:"+JSON.stringify(imgObj)) |
|
} |
|
}, |
|
// 获取浏览器宽高 |
|
getWindowWH: function () { |
|
var _this = this; |
|
if (window.innerWidth) |
|
_this.winWidth = window.innerWidth; |
|
else if ((document.body) && (document.body.clientWidth)) |
|
_this.winWidth = document.body.clientWidth; |
|
// 获取窗口高度 |
|
if (window.innerHeight) |
|
_this.winHeight = window.innerHeight; |
|
else if ((document.body) && (document.body.clientHeight)) |
|
_this.winHeight = document.body.clientHeight-74; |
|
// 通过深入 Document 内部对 body 进行检测，获取窗口大小 |
|
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { |
|
_this.winHeight = document.documentElement.clientHeight-74; |
|
_this.winWidth = document.documentElement.clientWidth; |
|
} |
|
} |
|
} |
|
window.ImgView = ImgView; |
|
}(window, document)); |