orico-official-website/public/static/index/js/large.js

$(document).ready(function () {
  // 图片上下滚动
  var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
  var interval = $("#imageMenu li:first").height();
  var curIndex = 0;
  if (curIndex > count) curIndex = 0;
  //左右箭头切换图片
  $('.scrollbutton').click(function () {
    if ($(this).hasClass('disabled')) return false;
    if ($(this).hasClass('smallImgUp')) --curIndex;
    else ++curIndex;
    $('.scrollbutton').removeClass('disabled');
    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
    $("#imageMenu ul").stop(false, true).animate({
      "marginTop": -curIndex * interval + "px"
    }, 600);
    //获取当前指定的图片属性
    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
    //切换图片
    $("#midimg").attr('src', midImg);
    $(".enlarge-img").find("img").attr('src', midImg);
    //小图添加属性
    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
  });
  //大图左右箭头切换图片
  $('.scrollbutton_01').click(function () {
    if ($(this).hasClass('disabled')) return false;
    if ($(this).hasClass('smallImgUp')) --curIndex;
    else ++curIndex;
    $('.scrollbutton_01').removeClass('disabled');
    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
    //$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
    $("#imageMenu ul").stop(false, true).animate({
      "marginTop": -curIndex * interval + "px"
    }, 600);
    //获取当前指定的图片属性
    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
    //切换图片
    $("#midimg").attr('src', midImg);
    $(".enlarge-img").find("img").attr('src', midImg);
    //小图添加属性
    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
  });

  function isIE() {
    return /MSIE|Trident/.test(navigator.userAgent);
  }
  // 解决 ie6 select框 问题
  $.fn.decorateIframe = function (options) {
    if (isIE()) {
      var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
      $(this).each(function () {
        var $myThis = $(this);
        //创建一个IFRAME
        var divIframe = $("<iframe />");
        divIframe.attr("id", opts.iframeId);
        divIframe.css("position", "absolute");
        divIframe.css("display", "none");
        divIframe.css("display", "block");
        divIframe.css("z-index", opts.iframeZIndex);
        divIframe.css("border");
        divIframe.css("top", "0");
        divIframe.css("left", "0");
        if (opts.width == 0) {
          divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 +
            "px");
        }
        if (opts.height == 0) {
          divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) *
            2 + "px");
        }
        divIframe.css("filter", "mask(color=#fff)");
        $myThis.append(divIframe);
      });
    }
  }
  $.fn.decorateIframe.defaults = {
    iframeId: "decorateIframe1",
    iframeZIndex: -1,
    width: 0,
    height: 0
  }
  //放大镜视窗
  $("#bigView").decorateIframe();
  //点击到中图
  var midChangeHandler = null;
  $("#imageMenu li img").bind("click", function () {
    if ($(this).attr("id") != "onlickImg") {
      midChange($(this).attr("data-url"));
      $("#imageMenu li").removeAttr("id");
      //$(this).parent().attr("id", "onlickImg");
    }
  }).bind("mouseover", function () {
    if ($(this).attr("id") != "onlickImg") {
      window.clearTimeout(midChangeHandler);
      midChange($(this).attr("data-url"));
      // $(this).css({ "border": "1px solid #990000" });
    }
  }).bind("mouseout", function () {
    if ($(this).attr("id") != "onlickImg") {
      $(this).removeAttr("style");
      midChangeHandler = window.setTimeout(function () {
        midChange($("#onlickImg img").attr("data-url"));
      }, 1000);
    }
  });
  //点击中图，切换大图
  $("#midimg").bind("click", function () {
    $(".enlarge-img").find("img").attr("src", $(this).attr("src"));
  });

  function midChange(src) {
    $("#midimg").attr("src", src).load(function () {
      changeViewImg();
    });
  }
  //大视窗看图
  function mouseover(e) {
    if ($("#winSelector").css("display") == "none") {
      $("#winSelector,#bigView").show();
    }
    $("#winSelector").css(fixedPosition(e));
    e.stopPropagation();
  }

  function mouseOut(e) {
    if ($("#winSelector").css("display") != "none") {
      $("#winSelector,#bigView").hide();
    }
    e.stopPropagation();
  }
  $("#midimg").mouseover(mouseover); //中图事件
  $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
  var $divWidth = $("#winSelector").width(); //选择器宽度
  var $divHeight = $("#winSelector").height(); //选择器高度
  var $imgWidth = $("#midimg").width(); //中图宽度
  var $imgHeight = $("#midimg").height(); //中图高度
  var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
  function changeViewImg() {
    $("#bigView img").attr("src", $("#midimg").attr("src"));
  }
  changeViewImg();
  $("#bigView").scrollLeft(0).scrollTop(0);

  function fixedPosition(e) {
    if (e == null) {
      return;
    }
    var $imgLeft = $("#midimg").offset().left; //中图左边距
    var $imgTop = $("#midimg").offset().top; //中图上边距
    X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
    Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
    X = X < 0 ? 0 : X;
    Y = Y < 0 ? 0 : Y;
    X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
    Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
    if ($viewImgWidth == null) {
      $viewImgWidth = $("#bigView img").outerWidth();
      $viewImgHeight = $("#bigView img").height();
      if ($viewImgWidth < 200 || $viewImgHeight < 200) {
        $viewImgWidth = $viewImgHeight = 800;
      }
      $height = $divHeight * $viewImgHeight / $imgHeight;
      $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
      $("#bigView").height($height);
    }
    var scrollX = X * $viewImgWidth / $imgWidth;
    var scrollY = Y * $viewImgHeight / $imgHeight;
    $("#bigView img").css({
      "left": scrollX * -1,
      "top": scrollY * -1
    });
    $("#bigView").css({
      "top": 0,
      "left": $(".preview").offset().left + $(".preview").width() + 15
    });
    return {
      left: X,
      top: Y
    };
  }
});