123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- //#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
|