图片放大器源码

片段 1片段 2

zoom.js

$(function () {
    var _default = {
        hoverClass: 'hover-img',
        zoomWidth: 155,
        zoomHeight: 155,
        mainImgWidth: 310, //主图宽度
        mainImgHeight: 310,
        offsetTop: 0,
        offsetLeft: 0
    };

    var $zoomPup = $('.zoom-pup');
    var $viewImg = $('.view-img'),
        $iparent = $viewImg.parent();

    $(document).on('mouseover', '.spec-items  li', function (e) {
        $(this)
            .addClass(_default.hoverClass)
            .siblings('li')
            .removeClass(_default.hoverClass);
        $('.spec-img').attr('src', $(this).find('img').attr('src'));
    });

    $('.main-img')
        .mouseenter(function (e) {
            $zoomPup.show();
            // 计算边距
            var offset = $(this).offset();
            _default.offsetTop = offset.top;
            _default.offsetLeft = offset.left;
            // 大图展示
            $viewImg.attr('src', $(this).find('img').attr('src'));
            $iparent.addClass('active');
        })
        .mousemove(function (e) {
            var px = e.pageX,
                py = e.pageY; //x坐标
            var zx = px - _default.zoomWidth / 2 - _default.offsetLeft,
                zy = py - _default.zoomHeight / 2 - _default.offsetTop;

            var vx = 0,
                vy = 0;

            zx < 0 && (zx = 0, vx = 0);
            zy < 0 && (zy = 0, vy = 0);            var left = _default.mainImgWidth - _default.zoomWidth,
                top = _default.mainImgHeight - _default.zoomHeight;

            // 计算边缘
            // zx > left ? (zx = left, vx = -1 * _default.zoomWidth / 2) : zx;
            // zy > left ? (zy = top, vy = -1 * _default.zoomHeight / 2) : zy;
            zx > left ? (zx = left) : zx;
            zy > left ? (zy = top) : zy;

            // 大图间距
            // 400 / 155 = 2.581
            vx = vx + zx * (-2.581);
            vy = vy + zy * (-2.581);

            // 设置dom
            $zoomPup.css({
                'left': zx + 'px',
                'top': zy + 'px',
                'width': _default.zoomWidth,
                'height': _default.zoomHeight
            });
            $viewImg.css({
                'left': vx + 'px',
                'top': vy + 'px'
            });
        })
        .mouseleave(function (e) {
            $iparent.removeClass('active');
            $zoomPup.hide();
        });
})

HTML源码

<div class="preview-wrap pull-left">
  <div class="main-img">
    <img src="static/images/product/p1.png" alt="" class="spec-img">
    <div class="zoom-pup"></div>
  </div>
  <div class="spec-items">
    <ul class="list-unstyled list-inline">
      <li class="hover-img">
        <img src="static/images/product/p1.png" alt="" width="50" class="s-img">
      </li>
      <li>
        <img src="static/images/product/p2.png" alt="" width="50" class="s-img">
      </li>
      <li>
        <img src="static/images/product/p1.png" alt="" width="50" class="s-img">
      </li>
      <li>
        <img src="static/images/product/p1.png" alt="" width="50" class="s-img">
      </li>
      <li>
        <img src="static/images/product/p1.png" alt="" width="50" class="s-img">
      </li>
    </ul>
  </div>
  <div class="view-wrap">
    <img src="" class="view-img" width="800">
  </div>
</div>

收藏

喜欢 0