1回答

• 

  summerstarry

  2016-09-23 22:21:58

  (function ($) {
  
    var LightBox = function () {
      var self = this;
  
      this.popupMask = $("<div id='mask'></div>");
      this.popupWin = $("<div id='popup'></div>");
      this.bodyNode = $(document.body);
  
      // 组名及数据变量
      this.groupName = null;
      this.groupData = [];
  
      this.renderDOM();
  
      // 获取弹出框区域
      this.picView = this.popupWin.find(".img"); // 图片区域
      this.pic = this.picView.find("img");
      this.prevBtn = this.picView.find(".btn-prev");
      this.nextBtn = this.picView.find(".btn-next");
      this.loader = this.picView.find(".img-loader");
      this.picInfo = this.popupWin.find(".info"); // 标题区域
      this.picCaption = this.picInfo.find(".info-des");
      this.picIndex = this.picInfo.find(".info-index");
      this.closeBtn = this.picInfo.find(".close");
  
      this.b_state = true;
      this.timer = null;
  
      // 事件委托
      this.bodyNode.delegate(".js_lightbox", "click", function (ev) {
        ev.stopPropagation();
  
        var curGroupName = $(this).attr("data-group");
  
        if (curGroupName != self.groupName) {
          self.groupName = curGroupName;
  
          self.getGroup();
        }
  
        self.intialPop($(this));
      });
  
      // 点击遮罩及关闭按钮时
      this.popupMask.click(function () {
        $(this).fadeOut();
        self.popupWin.fadeOut();
      });
  
      this.closeBtn.click(function () {
        self.popupMask.fadeOut();
        self.popupWin.fadeOut();
      });
  
  
      // 左右按钮事件
      this.prevBtn.hover(function () {
        if (!$(this).hasClass("disabled") && self.groupData.length > 1) {
          $(this).addClass("btn-prev__show");
        }
      }, function () {
        if (!$(self).hasClass("disabled") && self.groupData.length > 1) {
          $(this).removeClass("btn-prev__show");
        }
      }).click(function (ev) {
        if (!$(this).hasClass("disabled") && self.b_state) {
          self.b_state = false;
  
          ev.stopPropagation();
  
          self.goTo("prev");
        }
      });
  
      this.nextBtn.hover(function () {
        if (!$(this).hasClass("disabled") && self.groupData.length > 1) {
          $(this).addClass("btn-next__show");
        }
      }, function () {
        if (!$(self).hasClass("disabled") && self.groupData.length > 1) {
          $(this).removeClass("btn-next__show");
        }
      }).click(function (ev) {
        if (!$(this).hasClass("disabled") && self.b_state) {
          self.b_state = false;
  
          ev.stopPropagation();
  
          self.goTo("next");
        }
      });
  
  
      // 根据窗口调整图片大小
      $(window).resize(function () {
        window.clearTimeout(self.timer);
  
        self.timer = setTimeout(function () {
          self.picLoadSize(self.groupData[self.zIndex].src);
        }, 500);
      });
    };
  
    LightBox.prototype = {
      goTo: function (direction) { // 左右切换图片
        if (direction === "next") {
          this.zIndex ++;
  
          if (this.zIndex === this.groupData.length - 1) {
            this.nextBtn.addClass("disabled").removeClass("btn-next__show");
          }
  
          if (this.zIndex > 0) {
            this.prevBtn.removeClass("disabled");
          }
  
          var imgURL = this.groupData[this.zIndex].src;
  
          this.picLoadSize(imgURL);
        } else {
          this.zIndex --;
  
          if (this.zIndex === 0) {
            this.prevBtn.addClass("disabled").removeClass("btn-next__show");
          }
  
          if (this.zIndex != this.groupData.length - 1) {
            this.nextBtn.removeClass("disabled");
          }
  
          var imgURL = this.groupData[this.zIndex].src;
  
          this.picLoadSize(imgURL);
        }
      },
  
      picLoadSize: function (picURL) { // 加载图片并获取尺寸
        var self = this;
  
        this.pic.css({width: "auto", height: "auto"}).hide();
        this.picInfo.hide();
  
        this.preLoadImg(picURL, function () {
          self.pic.attr("src", picURL);
  
          var picWidth = self.pic.width();
          var picHeight = self.pic.height();
  
          self.changeImg(picWidth, picHeight);
        });
      },
  
      changeImg: function (picWidth, picHeight) { // 改变各项值及显示图片
        var self = this;
        var clietnWidth = $(window).width();
        var clietnHeight = $(window).height();
  
        var scale = Math.min(clietnWidth / picWidth, clietnHeight / picHeight, 1);
  
        picWidth = picWidth * scale;
        picHeight = picHeight * scale;
  
        this.picView.animate({
          width: picWidth,
          height: picHeight
        });
  
        this.popupWin.animate({
          width: picWidth,
          height: picHeight,
          marginLeft: -(picWidth / 2),
          top: (clietnHeight - picHeight) / 2
        }, function () {
          self.pic.css({
            width: picWidth,
            height: picHeight
          }).fadeIn();
  
          self.picInfo.fadeIn();
  
          self.b_state = true;
        });
  
        this.picIndex.text("Image "+(this.zIndex + 1)+" of "+this.groupData.length+"");
        this.picCaption.text(this.groupData[this.zIndex].caption);
      },
  
      preLoadImg: function (picURL, fn) { // 图片加载函数
        var oImg = new Image();
  
        if (!!window.ActiveXObject) {
          oImg.onreadystatechage = function () {
            if (this.readyState == "complete") {
              fn();
            }
          };
        } else {
          oImg.onload = function () {
            fn();
          };
        }
  
        oImg.src = picURL;
      },
  
      showMaskAndPop: function (src, curId) { // 显示弹窗部分区域
        var self = this;
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        var viewHeight = winHeight / 2;
  
        this.pic.hide();
        this.picInfo.hide();
  
        this.popupMask.fadeIn();
  
        this.picView.css({
          width: winWidth / 2,
          height: winHeight / 2
        });
  
        this.popupWin.fadeIn();
        this.popupWin.css({
          width: winWidth / 2,
          height: winHeight / 2,
          marginLeft: -(winWidth / 2) / 2,
          top: -viewHeight
        }).animate({
          top: (winHeight - viewHeight) / 2
        }, function () {
          self.picLoadSize(src);
        });
  
  
        // 存下当前元素在数组中的位置
        this.zIndex = this.getIndex(curId);
  
        var dataLen = this.groupData.length;
  
        if (dataLen > 1) {
          if (this.zIndex === 0) {
            this.prevBtn.addClass("disabled");
            this.nextBtn.removeClass("disabled");
          } else if (this.zIndex == dataLen - 1) {
            this.prevBtn.removeClass("disabled");
            this.nextBtn.addClass("disabled");
          } else {
            this.prevBtn.removeClass("disabled");
            this.nextBtn.removeClass("disabled");
          }
        }
      },
  
      intialPop: function (curObj) { // 初始化弹窗
        var sourceSrc = curObj.attr("data-source");
        var curId = curObj.attr("data-id");
  
        this.showMaskAndPop(sourceSrc, curId);
      },
  
      getGroup: function () { // 同一组数据获取
        var self = this;
        var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");
  
        this.groupData.length = 0;
  
        groupList.each(function () {
          self.groupData.push({
            src: $(this).attr("data-source"), 
            id: $(this).attr("data-id"),
            caption: $(this).attr("data-caption")
          });
        });
      },
  
      renderDOM: function () { // 渲染 DOM
        var str = '<div class="container">\
            <a class="img" href="#">\
              <img src="#" alt="#">\
              <span class="btn btn-prev"></span>\
              <span class="btn btn-next"></span>\
            </a>\
            <div class="info">\
              <span class="info-des">Click the right half of the image to move forward.</span>\
              <span class="info-index">Image 0 of 0</span>\
              <a href="#" class="close"></a>\
            </div>\
          </div>';
  
        this.popupWin.html(str);
  
        this.bodyNode.append(this.popupMask);
        this.bodyNode.append(this.popupWin);
      },
  
      getIndex: function (curId) { // 存下当前元素在数组中的位置
        var index = 0;
  
        $(this.groupData).each(function (i) {
          if (this.id === curId) {
            return false;
          } else {
            index ++;
          }
        });
  
        return index;
      }
    };
  
    window["LightBox"] = LightBox;
  
  })(jQuery);

  
  

  0 0