|
|
@@ -0,0 +1,616 @@
|
|
|
+function Jsequencing(options) {
|
|
|
+ var defaults = {
|
|
|
+ listid: "img_ul",
|
|
|
+ thumbherf: "",
|
|
|
+ bigherf: options.thumbherf,
|
|
|
+ imgsrcarr: [],
|
|
|
+ jsondata: false,
|
|
|
+ viewimg: true,
|
|
|
+ view_toggle: true,
|
|
|
+ view_zoom: true,
|
|
|
+ view_rotate: true,
|
|
|
+ showtitle: true,
|
|
|
+ IdClass: "__item__",
|
|
|
+ };
|
|
|
+ var opts = $.extend(defaults, options);
|
|
|
+ if ((typeof opts.imgsrcarr[0] == 'string') && opts.imgsrcarr[0].constructor == String) {
|
|
|
+ opts.jsondata = false;
|
|
|
+ } else if ((typeof opts.imgsrcarr[0] == 'object') && opts.imgsrcarr[0].constructor == Object) {
|
|
|
+ opts.jsondata = true;
|
|
|
+ } else if (opts.imgsrcarr[0] !== undefined) {
|
|
|
+ alert("数据格式不正确")
|
|
|
+ }
|
|
|
+ if (!opts.jsondata)
|
|
|
+ opts.showtitle = false;
|
|
|
+ var box = this.box = $("#" + opts.listid);
|
|
|
+ box.append("<div class='itemlist' style='height:100%'></div>" + "<div class='ident'></div>" + "<div class='morexy'></div>");
|
|
|
+ var itemlist = box.find(".itemlist");
|
|
|
+ this.itemhtml = function (imgsrc, imgtitle) {
|
|
|
+ var titlebox = opts.showtitle ? '<div class="textbox">' + imgtitle + '</div>' : "";
|
|
|
+ return '<input class="checkbox" name="" type="checkbox" value="">' + '<div class="picbox">' + '<a class="viewimg" href="' + opts.bigherf + imgsrc + '" title="' + imgtitle + '">' + '<img src="' + opts.thumbherf + imgsrc + '" ondragstart="return false;" />' + '</a>' + '</div>' + titlebox
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ var html = '';
|
|
|
+ for (var j = 0; j < opts.imgsrcarr.length; j++) {
|
|
|
+ var vimgsrc = opts.showtitle ? opts.imgsrcarr[j].src : opts.imgsrcarr[j];
|
|
|
+ var vimgtitle = opts.showtitle ? opts.imgsrcarr[j].title : "";
|
|
|
+ html += '<div class="item ' + opts.IdClass + '" id="' + opts.listid + '_item' + j + '" item="' + j + '">' + this.itemhtml(vimgsrc, vimgtitle) + '</div>';
|
|
|
+ }
|
|
|
+ itemlist.html(html);
|
|
|
+ var box_w = box.width();
|
|
|
+ var item_w, item_h, col_len, few_len, imgnum, box_h;
|
|
|
+ this.info = function (fun) {
|
|
|
+ if (item_w === undefined || item_w === null) {
|
|
|
+ item_w = itemlist.find("." + opts.IdClass).outerWidth(true);
|
|
|
+ item_h = itemlist.find("." + opts.IdClass).outerHeight(true);
|
|
|
+ box.find(".ident").css({
|
|
|
+ height: item_h + "px"
|
|
|
+ });
|
|
|
+ box.find(".morexy").css({
|
|
|
+ width: item_w + "px",
|
|
|
+ height: item_h + "px"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ imgnum = itemlist.find("." + opts.IdClass).length;
|
|
|
+ col_len = Math.floor(box_w / item_w);
|
|
|
+ few_len = Math.ceil(imgnum / col_len);
|
|
|
+ box_h = item_h * few_len + 20;
|
|
|
+ box.height(box_h + "px");
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ var draw = this.draw = function (dom, col, few, slidetime) {
|
|
|
+ dom.css({
|
|
|
+ "transition-duration": slidetime + "ms",
|
|
|
+ "transform": "translate(" + col + "px," + few + "px)",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.computat = function (index, domid, slidetime) {
|
|
|
+ var item = $("#" + domid);
|
|
|
+ item.attr({
|
|
|
+ "item": index,
|
|
|
+ });
|
|
|
+ if (chekobj[domid] !== undefined) {
|
|
|
+ chekobj[domid] = index;
|
|
|
+ }
|
|
|
+ var col_aliquot = index % col_len;
|
|
|
+ var row_aliquot = Math.floor(index / col_len);
|
|
|
+ var index_col = item_w * (col_aliquot);
|
|
|
+ var index_few = item_h * row_aliquot;
|
|
|
+ this.draw(item, index_col, index_few, slidetime);
|
|
|
+ item.attr({
|
|
|
+ "col": index_col,
|
|
|
+ "few": index_few
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ var redraw = this.redraw = function (strati, ilen, slidetime) {
|
|
|
+ for (var j = strati; j < strati + ilen; j++) {
|
|
|
+ this.computat(j, opts.listid + "_item" + itemidarr[j], slidetime);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ if (this.info(this)) {
|
|
|
+ var chekobj = {};
|
|
|
+ var itemidarr = [];
|
|
|
+ this.imgnewarr = [];
|
|
|
+ for (var i = 0; i < imgnum; i++) {
|
|
|
+ itemidarr.push(i)
|
|
|
+ }
|
|
|
+ ;this.redraw(0, itemidarr.length, 0);
|
|
|
+ }
|
|
|
+ $(window).resize(function () {
|
|
|
+ box_w = box.width();
|
|
|
+ if (this.info(this)) {
|
|
|
+ this.redraw(0, itemidarr.length, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bind(this));
|
|
|
+ this.datadel = function () {
|
|
|
+ if (!($.isEmptyObject(chekobj))) {
|
|
|
+ for (indexi in chekobj) {
|
|
|
+ var itemi = parseInt(itemlist.find("#" + indexi).attr("item"));
|
|
|
+ var arr2 = [];
|
|
|
+ for (var i = 0; i < itemidarr.length; i++) {
|
|
|
+ if (i == itemi) {
|
|
|
+ itemidarr[i] = null;
|
|
|
+ } else if (itemidarr[i] != null) {
|
|
|
+ arr2.push(itemidarr[i]);
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ itemlist.find("#" + indexi).remove();
|
|
|
+ delete chekobj.indexi;
|
|
|
+ }
|
|
|
+ itemidarr = arr2;
|
|
|
+ }
|
|
|
+ this.redraw(0, itemidarr.length, 200);
|
|
|
+ this.info(this);
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ this.dataempty = function () {
|
|
|
+ itemlist.find("." + opts.IdClass).remove();
|
|
|
+ opts.imgsrcarr.length = 0;
|
|
|
+ itemidarr.length = 0;
|
|
|
+ chekobj = {};
|
|
|
+ box_h = "20";
|
|
|
+ box.height(box_h + "px");
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ this.addimg = function (imgsrc, imgtitle) {
|
|
|
+ if (opts.jsondata) {
|
|
|
+ opts.imgsrcarr.push({
|
|
|
+ src: imgsrc,
|
|
|
+ title: imgtitle
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ opts.imgsrcarr.push(imgsrc);
|
|
|
+ }
|
|
|
+ var imgnum = opts.imgsrcarr.length - 1;
|
|
|
+ itemidarr.push(imgnum);
|
|
|
+ var titlebox = opts.showtitle ? '<div class="textbox">' + vimgtitle + '</div>' : "";
|
|
|
+ if (imgtitle === undefined)
|
|
|
+ imgtitle = "";
|
|
|
+ itemlist.append('<div class="item ' + opts.IdClass + '" id="' + opts.listid + '_item' + imgnum + '" item="' + imgnum + '">' + this.itemhtml(imgsrc, imgtitle) + '</div>');
|
|
|
+ this.redraw(itemidarr.length - 1, 1, 0);
|
|
|
+ this.info(this);
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ this.addimgarr = function (imgobj) {
|
|
|
+ if (Object.prototype.toString.call(imgobj) == '[object Array]') {
|
|
|
+ if (opts.jsondata) {
|
|
|
+ if (!((typeof imgobj[0] == 'object') && imgobj[0].constructor == Object)) {
|
|
|
+ alert("数据格式不正确,请传入json格式数据!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!((typeof imgobj[0] == 'string') && imgobj[0].constructor == String)) {
|
|
|
+ alert("数据格式不正确,请传入字符串格式数据!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var i = 0; i < imgobj.length; i++) {
|
|
|
+ if (opts.jsondata) {
|
|
|
+ if (imgobj[i].title === undefined)
|
|
|
+ imgobj[i].title = "";
|
|
|
+ this.addimg(imgobj[i].src, imgobj[i].title);
|
|
|
+ } else {
|
|
|
+ this.addimg(imgobj[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }.bind(this)
|
|
|
+ this.getnewarr = function () {
|
|
|
+ this.imgnewarr.length = 0;
|
|
|
+ for (var i = 0; i < itemidarr.length; i++) {
|
|
|
+ this.imgnewarr.push(opts.imgsrcarr[itemidarr[i]])
|
|
|
+ }
|
|
|
+ console.log(this.imgnewarr);
|
|
|
+ return this.imgnewarr;
|
|
|
+ }
|
|
|
+ .bind(this)
|
|
|
+ itemlist.on("click", "input.checkbox", function () {
|
|
|
+ var thisid = $(this).parents("." + opts.IdClass).attr("id");
|
|
|
+ if ($(this).prop("checked")) {
|
|
|
+ var index = parseInt($(this).parents("." + opts.IdClass).attr("item"));
|
|
|
+ chekobj[thisid] = index;
|
|
|
+ } else {
|
|
|
+ delete chekobj[thisid];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ var startX = null;
|
|
|
+ var startY = null;
|
|
|
+ var moveDom = null;
|
|
|
+ var checkItem = null;
|
|
|
+ var startIndex = null;
|
|
|
+ var isSelected = false;
|
|
|
+ var oldCol = null;
|
|
|
+ var oldFew = null;
|
|
|
+ var identDom = box.find(".ident");
|
|
|
+ var multipleBox = box.find(".morexy");
|
|
|
+ var isDrag = false;
|
|
|
+ var identMobieX = null;
|
|
|
+ var identMobieY = null;
|
|
|
+
|
|
|
+ function mouseinit() {
|
|
|
+ moveDom = null;
|
|
|
+ isDrag = false;
|
|
|
+ checkItem.css({
|
|
|
+ "opacity": "1",
|
|
|
+ "z-index": ""
|
|
|
+ });
|
|
|
+ multipleBox.hide();
|
|
|
+ identDom.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ function getchekobj() {
|
|
|
+ var domidarr = [];
|
|
|
+ for (var key in chekobj) {
|
|
|
+ domidarr.push("#" + key);
|
|
|
+ }
|
|
|
+ var chekDomObj = $(domidarr.join(','));
|
|
|
+ if (domidarr.length == 0) {
|
|
|
+ chekDomObj = checkItem;
|
|
|
+ }
|
|
|
+ return chekDomObj;
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).on("mouseup", function () {
|
|
|
+ if (moveDom != null) {
|
|
|
+ draw(moveDom, oldCol, oldFew, 0);
|
|
|
+ mouseinit();
|
|
|
+ if (isSelected) {
|
|
|
+ for (arri in chekobj) {
|
|
|
+ var elem = $("#" + arri);
|
|
|
+ draw(elem, elem.attr("col"), elem.attr("few"), 300);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ box.on({
|
|
|
+ mousedown: function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ if (e.target.localName == "input") {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var isIdclass = $(e.target).hasClass(opts.IdClass);
|
|
|
+ var pIdClass = $(e.target).parents("." + opts.IdClass)[0];
|
|
|
+ if (!isIdclass && pIdClass == undefined) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (isIdclass) {
|
|
|
+ checkItem = $(e.currentTarget);
|
|
|
+ } else {
|
|
|
+ checkItem = $(pIdClass);
|
|
|
+ }
|
|
|
+ if (checkItem.find("input.checkbox").prop("checked")) {
|
|
|
+ isSelected = true;
|
|
|
+ moveDom = multipleBox;
|
|
|
+ } else {
|
|
|
+ isSelected = false;
|
|
|
+ moveDom = checkItem;
|
|
|
+ }
|
|
|
+ startX = e.pageX;
|
|
|
+ startY = e.pageY;
|
|
|
+ startIndex = parseInt(checkItem.attr("item"));
|
|
|
+ oldCol = parseInt(checkItem.attr("col"));
|
|
|
+ oldFew = parseInt(checkItem.attr("few"));
|
|
|
+ checkItem = getchekobj();
|
|
|
+ checkItem.css({
|
|
|
+ "opacity": "0.8",
|
|
|
+ "z-index": "10"
|
|
|
+ });
|
|
|
+ draw(identDom, oldCol, oldFew, 0);
|
|
|
+ },
|
|
|
+ mousemove: function (e) {
|
|
|
+ if (moveDom == null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (e.which != 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var gapX = e.pageX - startX;
|
|
|
+ var gapY = e.pageY - startY;
|
|
|
+ var mobiex = oldCol + gapX;
|
|
|
+ var mobiey = oldFew + gapY;
|
|
|
+ if (mobiex > box_w - item_w) {
|
|
|
+ mobiex = box_w - item_w;
|
|
|
+ } else if (mobiex < 0) {
|
|
|
+ mobiex = 0;
|
|
|
+ }
|
|
|
+ if (mobiey > box_h - item_h) {
|
|
|
+ mobiey = box_h - item_h;
|
|
|
+ } else if (mobiey < 0) {
|
|
|
+ mobiey = 0;
|
|
|
+ }
|
|
|
+ if (Math.abs(gapX) > 10 || Math.abs(gapY) > 10) {
|
|
|
+ if (!isDrag) {
|
|
|
+ if (isSelected) {
|
|
|
+ draw(moveDom, oldCol, oldFew, 0);
|
|
|
+ for (arri in chekobj) {
|
|
|
+ $("#" + arri).css({
|
|
|
+ "opacity": "0.25",
|
|
|
+ "z-index": "10"
|
|
|
+ });
|
|
|
+ draw($("#" + arri), oldCol, oldFew, 300);
|
|
|
+ }
|
|
|
+ moveDom.show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ draw(moveDom, mobiex, mobiey, 0);
|
|
|
+ identMobieX = Math.abs(Math.ceil((mobiex - item_w / 2) / item_w));
|
|
|
+ identMobieY = Math.abs(Math.ceil((mobiey - item_h / 2) / item_h));
|
|
|
+ identDom.show();
|
|
|
+ draw(identDom, identMobieX * item_w, identMobieY * item_h, 0);
|
|
|
+ isDrag = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseup: function (e) {
|
|
|
+ if (moveDom == null) {
|
|
|
+ return;
|
|
|
+ } else if (isDrag) {
|
|
|
+ draw(moveDom, oldCol, oldFew, 0);
|
|
|
+ var toposion = identMobieY * col_len + identMobieX;
|
|
|
+ if (isSelected) {
|
|
|
+ var min = itemidarr.length;
|
|
|
+ var max = 0;
|
|
|
+ var transsh = [];
|
|
|
+ for (indexi in chekobj) {
|
|
|
+ itemlist.find("#" + indexi).css({
|
|
|
+ "opacity": "1",
|
|
|
+ "z-index": ""
|
|
|
+ });
|
|
|
+ for (var i = 0; i < itemidarr.length; i++) {
|
|
|
+ if (i == chekobj[indexi]) {
|
|
|
+ min = i < min ? i : min;
|
|
|
+ max = i + 1 > max ? i + 1 : max;
|
|
|
+ transsh.push(itemidarr[i]);
|
|
|
+ itemidarr[i] = null;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ for (var i = 0; i < transsh.length; i++) {
|
|
|
+ itemidarr.splice(toposion + i, 0, transsh[i]);
|
|
|
+ }
|
|
|
+ for (var i = itemidarr.length - 1; i >= 0; i--) {
|
|
|
+ if (itemidarr[i] == null) {
|
|
|
+ itemidarr.splice(i, 1);
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+ min = toposion < min ? toposion : min;
|
|
|
+ max = toposion > max ? toposion : max;
|
|
|
+ if (max - min != transsh.length) {
|
|
|
+ redraw(min, max - min, 200);
|
|
|
+ } else {
|
|
|
+ for (arri in chekobj) {
|
|
|
+ var elem = $("#" + arri);
|
|
|
+ draw(elem, elem.attr("col"), elem.attr("few"), 300);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var difference = toposion - startIndex;
|
|
|
+ if (difference > 1) {
|
|
|
+ var changesitem = itemidarr.splice(startIndex, 1)[0];
|
|
|
+ itemidarr.splice(toposion - 1, 0, changesitem);
|
|
|
+ redraw(startIndex, startIndex + difference, 200);
|
|
|
+ } else if (difference < 0) {
|
|
|
+ var changesitem = itemidarr.splice(startIndex, 1)[0];
|
|
|
+ itemidarr.splice(toposion, 0, changesitem);
|
|
|
+ difference = Math.abs(difference) + 1;
|
|
|
+ redraw(toposion, toposion + difference, 200);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ mouseinit();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mouseleave: function (e) {
|
|
|
+ if (moveDom == null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ var ismove = false;
|
|
|
+ var eimgx, eimgy;
|
|
|
+ itemlist.on({
|
|
|
+ click: function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ if (!ismove) {
|
|
|
+ var item = parseInt($(this).parents("." + opts.IdClass).attr("item"));
|
|
|
+ if (opts.viewimg) {
|
|
|
+ chakshow(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mousedown: function (e) {
|
|
|
+ eimgx = e.pageX;
|
|
|
+ eimgy = e.pageY;
|
|
|
+ ismove = false;
|
|
|
+ },
|
|
|
+ mouseup: function (e) {
|
|
|
+ eimgx = Math.abs(e.pageX - eimgx);
|
|
|
+ eimgy = Math.abs(e.pageY - eimgy);
|
|
|
+ ismove = false;
|
|
|
+ if (eimgx > 5 || eimgy > 5)
|
|
|
+ ismove = true;
|
|
|
+ },
|
|
|
+ mouseleave: function () {
|
|
|
+ ismove = false;
|
|
|
+ },
|
|
|
+ }, "a");
|
|
|
+ if (opts.viewimg) {
|
|
|
+ var chak_btn = "";
|
|
|
+ if (opts.view_toggle)
|
|
|
+ chak_btn += '<button class="chak_prev">上一个</button><button class="chak_next">下一个</button>';
|
|
|
+ if (opts.view_rotate)
|
|
|
+ chak_btn += '<button class="chak_turn_l">向左转</button><button class="chak_turn_r">向右转</button>';
|
|
|
+ chak_btn += '<button class="chak_close">关闭</button>';
|
|
|
+ box.append('<div class="chak_box">' + '<div class="chak_title"></div>' + '<div class="chak_img">' + '<img draggable="false" src="" ondragstart="return false;" />' + '<p></p></div>' + '<div class="chak_btn">' + chak_btn + '</div>' + '</div>');
|
|
|
+ var chak_box = box.find(".chak_box");
|
|
|
+ chak_box.on({
|
|
|
+ click: function (e) {
|
|
|
+ chakhide();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chak_box.find(".chak_img > img").on({
|
|
|
+ click: function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (opts.view_toggle) {
|
|
|
+ chak_box.find(".chak_prev").on({
|
|
|
+ click: function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ var item = parseInt(chak_box.find(".chak_img").attr("item")) - 1;
|
|
|
+ chakshow(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chak_box.find(".chak_next").on({
|
|
|
+ click: function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ var item = parseInt(chak_box.find(".chak_img").attr("item")) + 1;
|
|
|
+ chakshow(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ var isview = false;
|
|
|
+ var pisshow = false;
|
|
|
+ var chakshow = function (imgitem) {
|
|
|
+ isview = true;
|
|
|
+ var chak_ptog = function (text) {
|
|
|
+ var chak_p = chak_box.find(".chak_img > p");
|
|
|
+ if (!pisshow) {
|
|
|
+ pisshow = true;
|
|
|
+ chak_p.html(text).show();
|
|
|
+ setTimeout(function () {
|
|
|
+ pisshow = false;
|
|
|
+ chak_p.hide();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (imgitem < 0) {
|
|
|
+ chak_ptog("已经是第一张图片");
|
|
|
+ return;
|
|
|
+ } else if (imgitem > itemidarr.length - 1) {
|
|
|
+ chak_ptog("已经是最后一张图片");
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ chak_box.find(".chak_img > p").hide()
|
|
|
+ }
|
|
|
+ var viewimgdom = itemlist.find("." + opts.IdClass + "[item='" + imgitem + "'] .viewimg")
|
|
|
+ var imgsrc = viewimgdom.attr("href");
|
|
|
+ var imgtitle = viewimgdom.attr("title");
|
|
|
+ chak_box.find(".chak_img").attr("item", imgitem);
|
|
|
+ chak_box.find(".chak_img > img").attr({
|
|
|
+ "src": imgsrc,
|
|
|
+ "style": ""
|
|
|
+ });
|
|
|
+ chak_box.find(".chak_title").html(imgtitle);
|
|
|
+ $("body").css({
|
|
|
+ "overflow": "hidden"
|
|
|
+ });
|
|
|
+ $("body", parent.document).css({
|
|
|
+ "overflow": "hidden"
|
|
|
+ });
|
|
|
+ chak_box.show();
|
|
|
+ };
|
|
|
+ var chakhide = this.chakhide = function () {
|
|
|
+ isview = false;
|
|
|
+ chak_box.find(".chak_img").attr("item", "");
|
|
|
+ chak_box.find(".chak_img > img").attr("src", "");
|
|
|
+ $("body").css({
|
|
|
+ "overflow": "auto"
|
|
|
+ });
|
|
|
+ chak_box.hide();
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ if (opts.view_zoom) {
|
|
|
+ var viewimg_zoom = function (solls, zoomval) {
|
|
|
+ var imgdom = chak_box.find(".chak_img > img");
|
|
|
+ var img = new Image();
|
|
|
+ img.src = imgdom.attr("src");
|
|
|
+ var imgWidth = img.width;
|
|
|
+ var ckimg_w = parseInt(imgdom.width());
|
|
|
+ imgdom.css({
|
|
|
+ "max-width": imgWidth + "px",
|
|
|
+ "max-height": "none"
|
|
|
+ });
|
|
|
+ solls > 0 ? ckimg_w += zoomval : ckimg_w -= zoomval;
|
|
|
+ imgdom.css({
|
|
|
+ "width": ckimg_w + "px"
|
|
|
+ });
|
|
|
+ };
|
|
|
+ chak_box.find(".chak_img > img").on({
|
|
|
+ click: function (event) {
|
|
|
+ event.stopPropagation();
|
|
|
+ },
|
|
|
+ mousedown: function (e) {
|
|
|
+ viewmove = true;
|
|
|
+ var marginx = parseInt($(this).css("margin-left"));
|
|
|
+ var marginy = parseInt($(this).css("margin-top"));
|
|
|
+ var _x = e.pageX - marginx;
|
|
|
+ var _y = e.pageY - marginy;
|
|
|
+ $(this).off("mousemove").on({
|
|
|
+ mousemove: function (e) {
|
|
|
+ if (viewmove) {
|
|
|
+ var x = e.pageX - _x;
|
|
|
+ var y = e.pageY - _y;
|
|
|
+ $(this).css({
|
|
|
+ "margin-top": y + "px",
|
|
|
+ "margin-left": x + "px"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ mouseup: function (e) {
|
|
|
+ viewmove = false;
|
|
|
+ },
|
|
|
+ mouseout: function (e) {
|
|
|
+ viewmove = false;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ $(document).on('mousewheel', function (event) {
|
|
|
+ if (isview) {
|
|
|
+ var solls = event.originalEvent.wheelDelta;
|
|
|
+ viewimg_zoom(solls, 50);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.addEventListener("DOMMouseScroll", function (event) {
|
|
|
+ if (isview) {
|
|
|
+ var solls = event.detail;
|
|
|
+ solls = 0 - solls;
|
|
|
+ viewimg_zoom(solls, 50);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ if (opts.view_rotate) {
|
|
|
+ function getmatrix(a, b, c, d, e, f) {
|
|
|
+ var aa = Math.round(180 * Math.asin(a) / Math.PI);
|
|
|
+ var bb = Math.round(180 * Math.acos(b) / Math.PI);
|
|
|
+ var cc = Math.round(180 * Math.asin(c) / Math.PI);
|
|
|
+ var dd = Math.round(180 * Math.acos(d) / Math.PI);
|
|
|
+ var deg = 0;
|
|
|
+ if (aa == bb || -aa == bb) {
|
|
|
+ deg = dd;
|
|
|
+ } else if (-aa + bb == 180) {
|
|
|
+ deg = 180 + cc;
|
|
|
+ } else if (aa + bb == 180) {
|
|
|
+ deg = 360 - cc || 360 - dd;
|
|
|
+ }
|
|
|
+ return deg >= 360 ? 0 : deg;
|
|
|
+ }
|
|
|
+
|
|
|
+ var chak_turn = function (dom, step) {
|
|
|
+ var _img = chak_box.find(".chak_img > img");
|
|
|
+ var deg = eval('get' + _img.css('transform'));
|
|
|
+ _img.css({
|
|
|
+ 'transform': 'translate(-50%,-50%) rotate(' + (deg + step) % 360 + 'deg)'
|
|
|
+ });
|
|
|
+ dom.attr({
|
|
|
+ "disabled": "true"
|
|
|
+ });
|
|
|
+ setTimeout(function () {
|
|
|
+ dom.removeAttr("disabled");
|
|
|
+ }, 60)
|
|
|
+ }
|
|
|
+ chak_box.find(".chak_turn_l").on({
|
|
|
+ click: function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ chak_turn($(this), -90)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chak_box.find(".chak_turn_r").on({
|
|
|
+ click: function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ chak_turn($(this), 90)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
