点击缩略图显示大图支持左右切换及缩放拖拽

 

1. css

body{
    font-family: "Microsoft YaHei";
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
*{padding: 0;margin: 0;list-style-type:none}
.main-content{
    width: 820px;
    height: 2000px;
    margin: 0 auto;
    border: solid 2px #FEE853;
    background: #cccccc;
}

.main-content ul{
    padding-bottom: 20px;
}

.main-content ul li{
    float: left;
}

.main-content ul li a{
    display: inline-block;
    width: 200px;
    height: 150px;
    border: solid 1px #FF3300;
    overflow: hidden;
}

.main-content ul li a img{
    width: 100%;
}


.facebox{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background:rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}


#btnleft{
    position: fixed;
    top: 50%;
    left: 20px;
    margin-top: -15px;
    z-index: 1001;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    text-align: center;
    line-height: 60px;
    font-size: 50px;
    font-weight: bold;
    background: #cccccc;
    color: #000;
    cursor: pointer;
}


#btnright{
    position: fixed;
    top: 50%;
    right: 20px;
    margin-top: -15px;
    z-index: 1001;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    text-align: center;
    line-height: 60px;
    font-size: 50px;
    font-weight: bold;
    background: #cccccc;
    color: #000;
    cursor: pointer;
}

#btnclose{
    width: 30px;
    height: 30px;
    font-size: 22px;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1000;
    background: #cccccc;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    color: #000;
    border-radius: 30px;
}

.img-box{
    position: relative;
    width: 100%;
    height: 100%;
}

#bigImg{
    position: absolute;
}

 

2.html

<div class="details_body">
<div class="main-content ">
    <ul class="imgUl_pic0001 clearfix">
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
    </ul>
   <ul class="imgUl_pic0001 clearfix">
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
   </ul>
</div>
</div>

<div class="facebox">
    <span id="btnleft"><</span>
    <span id="btnright">></span>
    <span id="btnclose">x</span>
    <div class="img-box" id="map">
        <img id="bigImg"  src="" alt=""/>
    </div>
</div>

 

3.js　　

<script src="jquery-1.8.3.min.js"></script>

$(function() {
   var d = document;
   var isRun,
      startX,
      startY,
      endX,
      endY,
      rX,
      rY,
      $b = d.getElementById("map");
      WinW=$(window).width(),
      WinH=$(window).height(),
      ww = WinW,
      wh = WinH,
      i = $b.getElementsByTagName('img')[0],
      img = i.style,
      scaleSize = 1,
      //大图循环数组
      imgArr=[];
   var imgw,
      imgh,
      bgX,
      bgY;
   var _ZoomFn = {
      //点击小图
      _zoomclickFn : function() {
         //点击显示大图
         $('.zoom-img').on('click', function() {
            //获取屏幕可见宽度和高度
            var height = $(window).height();
            var width = $(window).width();
            var _this = $(this);
            var _eq = _this.parent('li').index();
            var _imgSrc = _this.attr('srcurl');
            $('#bigImg').attr('src', _imgSrc);
            _ZoomFn._leftFn(_this);
            _ZoomFn.bigloadFn(width, height)
         });
         //关闭
         $('#btnclose').on('click', function() {
            $('.facebox').fadeOut(200);
            scaleSize=1;
            //清空img大图数组
         });
         _ZoomFn.on($b,{"mousedown" : function(e) {
               //按中建快速还原大小
               if (e.which === 2) {
                  _ZoomFn.rs();
               }
               if (e.which === 1 && e.target && (e.target === i || e.target === $b)) {
                  isRun = true;
                  startX = e.pageX;
                  startY = e.pageY;
                  e.preventDefault();
               }
            },
            "mouseup" : function(e) {
               if (e.which !== 1) {
                  return;
               }
               img.cursor = "default";
               isRun = false;
               bgX = rX;
               bgY = rY;
               e.preventDefault();
            },
            "mousemove" : function(e) {
               if (e.which !== 1) {
                  return;
               }
               if (isRun) {
                  e.preventDefault();
                  img.cursor = "move";
                  endX = e.pageX;
                  endY = e.pageY;
                  rX = bgX + endX - startX;
                  rY = bgY + endY - startY;
                  img.left = rX + "px";
                  img.top = rY + "px";
               }
            },
            //以鼠标为中心缩放，同时进行位置调整
            "mousewheel" : function(e) {
               var deltaY = 0;
               var x = e.pageX;
               var y = e.pageY;
               e.preventDefault();
               if (e.target && (e.target === i)) {
                  var l = _ZoomFn.getOffset($b);
                  x = x - l.left;
                  y = y - l.top;
                  var p = (e.wheelDelta) / 1200||(-e.detail)/30;
                  var ns = scaleSize;
                  ns += p;
                  ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns); //可以缩小到0.1,放大到5倍
                  //计算位置，以鼠标所在位置为中心
                  //以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
                  bgX = bgX - (x - bgX) * (ns - scaleSize) / (scaleSize);
                  bgY = bgY - (y - bgY) * (ns - scaleSize) / (scaleSize);
                  scaleSize = ns; //更新倍率
                  img.width = imgw * ns + "px";
                  img.height = imgh * ns + "px";
                  img.top = bgY + "px";
                  img.left = bgX + "px";
               }
            }
         });
      },

      //大图加载
      bigloadFn : function(_width, _height) {
         $('#bigImg').load(function() {
            _ZoomFn._imgbigFn(this, _width, _height, true);
         });
         scaleSize=1;
      },
      //大图左右切换
      _leftFn : function(_tarGet) {
         var imgUrl = $('#bigImg').attr('src');
         var imgUrls = _tarGet.parents('.imgUl_pic0001').find('a').each(function(i) {
            imgArr[i] = $(this).attr('srcurl');
         });

         //上一张
         $('.details_body').on('click', '#btnleft', function() {
            for (var j = imgArr.length; j > 0; j--) {
               if (imgUrl == imgArr[j]) {
                  j--;
                  $('#bigImg').attr('src', imgArr[j]);
                  imgUrl = $('#bigImg').attr('src');
               }
               scaleSize = 1;
            }
         });
         //下一张
         $('.details_body').on('click', '#btnright', function() {
            for (var j = 0; j < imgArr.length; j++) {
               if (imgUrl == imgArr[j]) {
                  j++;
                  $('#bigImg').attr('src', imgArr[j]);
                  imgUrl = $('#bigImg').attr('src');
               }
               scaleSize = 1;
            }
         });
      },
      _imgbigFn : function(dom, width, height, flag, noReplay) {
         //大图的父级盒子是隐藏的状态，浏览器高宽为0
         if ($(dom).parents(":hidden").length > 0 && height == 0 && width == 0) {
            return;
         }
         noReplay = noReplay || "yes";
         var $dom = $(dom);
         var simg = new Image();
         simg.src = dom.src;
         var _thisH = $dom.height();//当前大图高
         var _thisW = $dom.width();//当前大图宽
         var _SimgH = simg.height;//Image高
         var _SimgW = simg.width;//Image高
         //当前大图高不为0
         if (_thisH && _thisH != _SimgH) {
            _thisH = _thisH;
         } else {
            _thisH = $dom.parent().parent().height()
         }
         if (_thisW && _thisW != _SimgW) {
            _thisW = _thisW;
         } else {
            _thisW = $dom.parent().parent().width();
         }
         if (!height) {
            height = _thisH;
         }
         if (_SimgH > 0 && _SimgW > 0) {
            if ((_SimgH <= height && _SimgW <= width) || (_SimgW <= width && noReplay == "no")) {
               $dom.width(_SimgW);
               $dom.height(_SimgH);
               if (flag) {
                  $dom.css({
                     'left':(width-_SimgW)/2,
                     'top':(height - _SimgH)/2
                  });
               }
               bgX=(width-_SimgW)/2;
               bgY=(height - _SimgH)/2;
               imgw=_SimgW;
               imgh=_SimgH;
            } else {
               var bh = (height-40) / _SimgH;
               var bw = (width*0.8) / _SimgW;
               var b = (noReplay == "no" ? bw : (bh < bw ? bh : bw));
               $dom.width(_SimgW * b);
               $dom.height(_SimgH * b);
               if (flag) {
                  var pt = (height - _SimgH * b) / 2,
                     pl = (width - _SimgW * b) / 2;
                  pt = (pt >= 1 ? pt : 0);
                  pl = (pl >= 1 ? pl : 0);
                  $dom.css({
                     'left':pl,
                     'top':pt
                  })
               }
               imgw = _SimgW * b;
               imgh = _SimgH * b;
               bgX=pl;
               bgY=pt;
            }
         }

         $('.img-box').show();
         $('.facebox').show();
         $dom = null;


      },

      evnt:function (event) {
         var evn = event,
            eventDoc, doc, body,
            button = evn.button
            evn.target = evn.target || evn.srcElement;

         // Calculate pageX/Y if missing and clientX/Y available
         if (evn.pageX == null && evn.clientX != null) {
            eventDoc = evn.target.ownerDocument || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            evn.pageX = evn.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
            evn.pageY = evn.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) -
            (doc && doc.clientTop || body && body.clientTop || 0);
         }
         if (!evn.preventDefault) {
            evn.preventDefault = function() {
               this.returnValue = false;
            }
         }
         if (!evn.stopPropagation) {
            evn.stopPropagation = function() {
               this.cancelBubble = true;
            }
         }
         if (evn.which == null && (evn.charCode != null || evn.keyCode != null)) {
            evn.which = evn.charCode != null ? evn.charCode : evn.keyCode;
         }
         // Add which for click: 1 === left; 2 === middle; 3 === right
         // Note: button is not normalized, so don't use it
         if (!evn.which && button !== undefined) {
            evn.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
         }
         return evn
      },
      getOffset:function(o) {
         var left = 0,
            top = 0;
         while (o != null && o != document.body) {
            top += o.offsetTop;
            left += o.offsetLeft;
            o = o.offsetParent;
         }
         return {
            left : left,
            top : top
         };
      },
      bind:function(b, a, c) {
         if(b.addEventListener){
            //mousewheel在火狐兼容判断
            if (a === "mousewheel" && document.mozHidden !== undefined) {
                   a = "DOMMouseScroll";
               }
               b.addEventListener(a, function(event) {
               c.call(b, _ZoomFn.evnt(event));
            }, false);
         }else{
            b.attachEvent("on" + a, function(event) {
               c.call(b, _ZoomFn.evnt(window.event));
            });
         }
      },
      //取消事件兼容
      unbind:function(obj,type,fn){
         if (obj.removeEventListener)
               obj.removeEventListener( type, fn, false );
           else if (obj.detachEvent) {
               obj.detachEvent(  "on" +type, obj["e"+type+fn] );
               obj["e"+type+fn] = null;
           }
      },
      //循环绑定事件
      on : function(b, o) {
         for (var a in o) {
            _ZoomFn.bind(b, a, o[a]);
         }
      },
      //循环解绑事件
      del:function(dom,o){
         for(var a in o){
            _ZoomFn.unbind(dom,a,o[a]);
         }
      }
};
   _ZoomFn._zoomclickFn();

});