//#region 图片阅览器 Namespace.register("U.Img"); /** * 图片阅览器 * * @param {array} 图片集合 ----------[Thm] 小图 ----------[Img] 原图 * @param {number} 访问第几张图 * @param {object} 属性设置 * @param {function} 创建回调函数 * @return {object} 图片浏览器对象 */ U.Img.Create = function (UDE, UI, UME, UCB) { U.M.StopBubble(); //取消冒泡 return (new U.Img.Create.init(UDE, UI, UME, UCB)).Create(); //创建图片浏览器功能区域 } /** * 图片阅览器 * * @param {array} 图片集合 ----------[Thm] 小图 ----------[Img] 原图 * @param {number} 访问第几张图 * @param {object} 属性设置 * @param {function} 创建回调函数 * @return {object} 图片浏览器对象 */ U.Img.Create.init = function (UDE, UI, UME, UCB) { /* 参数说明:Iss 、I: 当前图片显示的位置 UCB:回调函数、 AIMG: 图片集 */ this.Iss; this.UIOD; this.BL; this.UIMG; this.W; this.h; this.R = 0; this.I = typeof UI == "number" ? UI : 0; this.UCB = UCB; this.CTF = true; this.AIMG = UDE; for (var i in UME) { if (UME.hasOwnProperty(i)) { this[i] = UME[i]; } } } U.Img.Create.init.prototype = { ET: [], //图片浏览的总和 /** * 图片阅览器 * * @param {array} 图片集合 * @param {number} 访问第几张图 */ ImgT: function (UDE, UDID) { //创建图片 var i, //用于循环 _UDOD, _UDTD, _UDSD, _UDKD, _UDCD, _UDID, //图片变量 _UCE = [["放大", "UD_SYJDXB"], ["缩小", "UD_SYJDXS"], ["左转", "UD_SYJDXL"], ["右转", "UD_SYJDXR"]]; //图片浏览器存在 自己修改替换值 if ((_UDOD = $("#" + UDID)[0])) { //如果图片存在 _UDID = $(_UDOD).childg(0)[0]; _UDID = $(_UDID).Child()[2]; _UDID = $("img", _UDID); $(_UDOD).Center(); _UDID.length ? (_UDID = _UDID[0], _UDID.src = UDE["Thm"]) : (_UDTD.innerHTML = "", _UDCD = $$("div", { "className": "UD_SYJZO" }, _UDTD), _UDID = $$("img", { "onerror": U.M.apply(this, [[U.M.ImgError, ["this", 1]]]), "onselectstart": U.M.apply(), "ondragstart": U.M.apply(), "src": U.M.GetImgU(UDE["Thm"]) }, _UDCD)); } //创建新的图片浏览器 else { _UDOD = $$("div", { "className": "UD_SYJ UD_SYJO", id: UDID, "onmousewheel": [[U.M.StopBubble], [this.Wheel, [this]]], "__size__": "false", "onmousedown": [[U.D.DragMouseDown, ["this"]]] }); _UDTD = $$("div", { "className": "UD_SYJA" }, _UDOD); _UDSD = $$("div", { "className": "UD_SYJD", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD); _UDSD = $$("div", { "className": "UD_SYJDX" }, _UDSD); _UDSD = $$("div", { "className": "UD_SYJDXS" }, _UDSD); for (i = 0; i < _UCE.length; i++) { _UDKD = $$("div", { "className": "UD_SYJDXC", "style": i ? {} : { "margin": "0px" }, "title": _UCE[i][0], onclick: U.M.apply(this, [[i > 1 ? this.Rotate : this.Zoom, [i > 1 ? (i - 2) * 2 - 1 : (i ? "Out" : "In"), _UDOD, this]]]) }, _UDSD); if (!i) { _UDCD = $$("div", {}, _UDKD); $$("div", { "title": "回到原图", "innerHTML": "  100%", onclick: U.M.apply(this, [[this.Zoom, [100, _UDOD, this]]]) }, _UDKD); } else { _UDCD = _UDKD; } $$("div", { "className": "UD_SYI UD_SYJDXO " + _UCE[i][1] }, _UDCD); $$("div", { "className": "UD_SYJDXT", "title": "点击" + _UCE[i][0], "innerHTML": _UCE[i][0] }, _UDCD); } $$("div", { "className": "UD_SYJL UD_SYJLO UD_SYI", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD); _UDCD = $$("div", { "className": "UD_SYJZ", "onmousedown": U.M.StopBubble }, _UDTD); $$("div", { "className": "UD_SYJL UD_SYJRO UD_SYI", "onmousedown": U.M.StopBubble, "onclick": U.M.StopBubble }, _UDTD); _UDCD = $$("div", { "className": "UD_SYJZO" }, _UDCD); _UDID = $$("img", { "onerror": U.M.apply(this, [[U.M.ImgError, ["this", 1]]]), "onselectstart": U.M.apply(), "ondragstart": U.M.apply(), "src": U.M.GetImgU(UDE["Thm"]) }, _UDCD); $$("div", { "className": "UD_SYI UD_SYQC UD_SYQCT", style: { top: "0", right: "0" }, "title": "关闭", "onmousedown": U.M.StopBubble, "onclick": U.M.apply(this, [[this.Close, [null, this]]]) }, _UDOD); $(_UDOD).appendTo((this.parent || document.body)).Center(); } //返回窗体、图片元素 return [(this.UIOD = _UDOD), (this.UIMG = _UDID)]; }, //创建图片浏览器 Create: function () { if (this.AIMG) {//如果有传图片 //AIMG是一个对象,里面包含了需要打开的图片路径 this.AIMG = this.AIMG.length != null ? this.AIMG : [this.AIMG]; //图片集 var _UIE = this.AIMG[this.I], //当前图片 _UDE = (this.UCB ? this.UCB(_UIE) : this.ImgT(_UIE, "Usestudio_Img")); //这里是是否使用默认的图片浏览器创建 this.R = 0; this.Iss = $(this.UIOD).attr("__size__") == "false"; //异步加载图片 U.M.imgReady(U.M.GetImgU(_UIE["Img"]), U.M.apply(null, [[this.Ready, [_UDE[0], _UDE[1], this, _UIE]]]), U.M.apply(null, [[this.Load, [_UDE[0], _UDE[1], this, _UIE]]]), U.M.apply(this, [[this.Error, [_UIE["Img"]]]])); //生成图片 return this; } }, /** * 删除窗体 * * @param {element} 图片浏览器窗体 * @param {number} 图片浏览器对象 * @param {string} 回调参数 */ XSI: function (UIOD, UT, UTF) { if (UT.CTF) { UT.Close(UIOD, UT, UTF); } //关闭 UT.CTF = true; //允许关闭 }, /** * 滚动放大缩小处理 * * @param {object} 图片浏览器对象 * @param {event} 回调参数 */ Wheel: function (UT, UE) { UE = event || UE; var _UWD = UE.wheelDelta ? (UE.wheelDelta / 120) : (-(UE.detail || UE.deltaY) / 3), _UTF = _UWD > 0 ? "In" : "Out"; //判断滚动是放大还是缩小 UT.Zoom(_UTF, UT.UIOD, UT); //放大缩小 }, /** * 切换图片的上一张或下一张 * * @param {number} 上一张的区分 ----------1 下一张处理 -----------1 上一张处理 * @param {object} 图片浏览器对象 * @param {function} 回调参数 */ Change: function (UTF, UT, UCB) { //获取当前显示第几张图片 UTF = UT.I + UTF; UT.I = UTF = (UTF < 0 || UTF >= UT.AIMG.length) ? ((UTF < 0) ? UT.AIMG.length - 1 : 0) : UTF; //设置一张图片的链接 var _UIID = $(UT.UIMG).addAttrArray({ "src": UT.AIMG[UTF]["Thm"], "style": { "filter": "alpha(opacity=30)", "MozOpacity": "0.3", "Khtml-opacity": "0.3", "opacity": "0.3" } }); //图片位置大小处理 UT.PJ("", "", UT.UIOD, UT.UIMG); //位置定位 UT.Rotate((UT.R = 0), UT.UIOD, UT); //大小位置重置 //加载图片回调 U.M.imgReady(UT.AIMG[UTF]["Img"], U.M.apply(null, [[UT.Ready, [UT.UIOD, _UIID[0], UT]]]), U.M.apply(null, [[UT.Load, [UT.UIOD, _UIID[0], UT]]]), U.M.apply(this, [[UT.Error]])); (UCB) && (U.M.apply(UT, UCB)()); //图片加载处理 }, /** * 滚动设置 * * @param {string} 上传成功回调函数 * @param {number} 上传成功回调函数 * @param {function} 回调参数 */ Zoom: function (US, UIOD, UT) {//放大缩小 //UIOD是整个IMG窗体 //US用来判断滚轮是向外滚还是向内滚 var US, _UW, _UH, _UIMG = $(this.UIMG); ("Out,In".indexOf(US) > -1) && (US = US == "Out" ? this.BL * 0.8 : this.BL / 0.8); UT.W = UT.W || _UIMG[0].width; UT.H = UT.H || _UIMG[0].height; this.BL = US = Math.max(Math.min(300, US), 22); _UH = parseInt(UT.H * (US / 100)); _UW = parseInt(UT.W * (US / 100)); _UIMG.addAttrArray({ "style": { "width": _UW + "px", "height": _UH + "px"} }); UT.PJ(_UW, _UH, UIOD, _UIMG[0]); U.D.PopupWindow(UIOD); }, /** * 图片定位调整 * * @param {number} 图片浏览器长 * @param {number} 图片浏览器宽 * @param {element} 图片浏览器 * @param {element} 图片 */ PJ: function (UW, UH, UIOD, UIID) { var _UDPD = $(UIID).Parent(); //设置长宽 _UDPD.style.height = UH ? UH + "px" : ""; _UDPD.style.width = UW ? UW + "px" : ""; //图片区中定位 (!this.Iss) && (UIOD.style.width = _UDPD.style.width); (UH) && ($(_UDPD).css("marginTop", ((UH = (($(_UDPD).Parent().offsetHeight - UH) / 2)) > 0 ? UH : 0) + "px")); }, /** * 滚动设置 * * @param {string} 上传成功回调函数 * @param {number} 上传成功回调函数 * @param {function} 回调参数 */ Rotate: function (UV, UIOD, UT) { //图片角度设置 //UV是用来判断旋转的角度 var _UIMG = $(UT.UIMG), _UDPD = _UIMG.Parent(), _UWH = [_UDPD.offsetWidth, _UDPD.offsetHeight]; (UV) && (_UWH.reverse()); UV = UT.R + UV; UV = UV >= 4 ? 0 : UV; UV = UV < 0 ? 3 : UV; UT.R = UV; _UWH[2] = UV % 2 ? ((_UWH[(UV - 1) / 2] / 2) + "px") : "center"; //角度 _UIMG.addAttrArray({ style: { "filter": "Progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + UV + ")", "transformOrigin": _UWH[2] + " " + _UWH[2], "WebkitTransform": "rotate(" + UV * 90 + "deg)", "MozTransform": "rotate(" + UV * 90 + "deg)", "transform": "rotate(" + UV * 90 + "deg)", "OTransform": "rotate(" + UV * 90 + "deg)" } }); //设定值 UT.PJ(_UWH[0], _UWH[1], UIOD, _UIMG[0]); U.D.PopupWindow(UIOD); //图片定位调整 //重新定位 }, /** * 浏览点移动 * * @param {element} 图片窗体 * @param {object} 图片浏览器 */ MoveScroll: function (UDOD, UT) {// UDOD.setCapture(); //聚焦 document.onmousemove = U.M.apply(UT, [[UT.Move, [UDOD, event.clientX, event.clientY, [UDOD.scrollTop, UDOD.scrollLeft], UT]]]); //移动处理 document.onmouseup = U.M.apply(UT, [[UT.Up, [UDOD]]]); //释放处理 }, /** * 滚动设置 * * @param {element} 图片窗口 * @param {number} 窗体left * @param {number} 窗体 top * @param {array} 所在区域滚动条 ----------[0] top滚动条 ----------[1] left 滚动条 * @param {object} 图片浏览器 */ Move: function (UDOD, UX, UY, UTL, UT) {//移动浏览 UT.CTF = false; //进行了移动 不允许关闭 $(UDOD).addAttrArray({ "scrollTop": UTL[0] - (event.clientY - UY), "scrollLeft": UTL[1] - (event.clientX - UX) }); //滚动范围 }, /** * 滚动设置 * * @param {string} 上传成功回调函数 */ Up: function (UDOD) {//取消 UDOD.releaseCapture(); //释放焦点 document.onmousemove = document.onmouseup = null; }, /** * 下载 * * @param {string} 文件名 */ Download: function (FN) { FN = FN.replace(US.fs, ""); //获取文件名 U.Dk.RE.ODL(FN, "1473用户图片.jpg"); //下载 }, /** * 移除窗口或者隐藏窗口 * * @param {element} 窗体对象 * @param {object} 图片浏览器对象 * @param {boolean} 是否移除还是隐藏 */ Close: function (UIOD, UT, UTF) {// U.D.CloseWindow(UIOD || this.UIOD, UTF ? "remove" : false); //移除窗口 this.ET.splice(this.ET.indexOf(UT), 1); //删除 }, /** * 滚动设置 * * @param {string} 图片窗体 * @param {number} 图片区域 * @param {function} 图片浏览器对象 * @param {object} 图片对象 ----------[Thm] 图片小图 ----------[Img] 图片原图 */ Ready: function (UIOD, UIID, T, UDE) {//图片获取具体尺寸 if (UIOD.style.display != "none" && (UDE && UDE["Thm"] == UIID.src || !UDE || !UDE["Thm"])) { //加载范围不在范围 //图片框大小处理 $[UIID, UIID.parentNode].addAttrArray({ "style": { "width": this.width + "px", "height": this.height + "px"} }); T.W = this.width; T.H = this.height; //设置位置居中 T.PJ(T.W, T.H, UIOD, UIID); U.D.PopupWindow(UIOD); return true; } else { return false; } }, /** * 图片缓冲中 * * @param {element} 图片浏览器窗体 * @param {element} 图片元素 * @param {object} 回调参数 * @param {function} 回调参数 */ Load: function (UIOD, UIID, T, UDE) {// if (this.src && UIOD.style.display != "none" && (UDE && UDE["Thm"] == UIID.src || !UDE || !UDE["Thm"])) { var _UDPD = $(UIID).Parent(), _UWH = this.Iss ? [_UDPD.offsetWidth, _UDPD.offsetHeight] : [US.Width, US.Height]; //缓存的时候设置样式 同时大小变化 $(UIID).addAttrArray({ "src": this.src, "style": { "MozOpacity": "1", "Khtml-opacity": "1", "opacity": "1", "filter": "alpha(opacity=100)"} }); T.W = this.width; T.H = this.height; UIOD = $(UIOD); T.Zoom(Math.min(Math.min(T.W, _UWH[0]) / this.width, Math.min(T.H, _UWH[1]) / this.height) * 100, UIOD[0], T); //默认原大小 UIOD.Center(); //居中弹出 } }, /** * 图片加载失败 * * @param {string} 上传成功回调函数 * @param {number} 上传成功回调函数 */ Error: function (URL, ITF) {// var UIOD; var _UIID = this.UIMG; ITF = ITF || 0; ITF++; //添加的图片 if (ITF < 3 && this.TF == 2) { //图片重新加载处理 U.M.imgReady(URL + "?&n=" + ITF, U.M.apply(null, [[this.Ready, [this.UIOD, _UIID, this]]]), U.M.apply(null, [[this.Load, [this.UIOD, _UIID, this]]]), U.M.apply(this, [[this.Error, [URL, ITF]]])); } else {//加载错误图片 U.Alert("图片丢失"); $(_UIID).css({ "width": "auto", "height": "auto" }); U.M.ImgError(_UIID, (this.TF || 1)); this.Zoom(100, this.UIOD, this); U.D.PopupWindow(this.UIOD) } } }; //#endregion