2

Есть лупа:

<script>
$(document).ready(function(){
  var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;

  var ui = {
    magniflier: $('.magniflier')
  };

  // Добавляем в DOM увеличительное стекло
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);

    $('body').append(div);
  }


  // Определяем положение курсора
  var mouseMove = function(e) {

    // Получаем отступы до края картинки слева и сверху
    var magnify_offset = cur_img.offset();

    // Позиция курсора над изображением
    // pageX/pageY - это значения по х и у положения курсора от краев браузера
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;

    // Увеличительное стекло должно отображаться только когда указатель мыши находится над картинкой
    // При отводе курсора от картинки происходит плавное затухание лупы
    // Поэтому необходимо проверить, не выходит ли за границы картинки положение курсора
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      // Если условие истинно переходим дальше
      magnify(e);
    }
    else {
      // иначе скрываем
      ui.glass.fadeOut(100);
    }

    return;
  };

  var magnify = function(e) {

    // Основное изображение будет в качестве фона в блоке div glass
    // поэтому необходимо рассчитать положение фона в этом блоке 
    // относительно положения курсора над картинкой
    //
    // Таким образом мы рассчитываем положение фона
    // и заносим полученные данные в переменную
    // которая будет использоваться в качестве значения
    // свойства background-position

    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";

    // Теперь определим положение самого увеличительного стекла
    // т.е. блока div glass
    // логика простая: половину ширины/высоты лупы вычитаем из 
    // положения курсора на странице

    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;

    // Теперь присваиваем полученные значения css свойствам лупы
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });

    return;
  };

  // Движение курсора над изображению
  $(ui.magniflier).on('mousemove', function() {
    // Плавное появление лупы
    ui.glass.fadeIn(100);
    // Текущее изображение
    cur_img = $(this);
    // определяем путь до картинки
    var src = cur_img.attr('src');
    // Если существует src, устанавливаем фон для лупы 
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }

    // Проверяем есть ли запись о первоначальном размере картинки native_width/native_height
    // если нет, значит вычисляем и создаем об этом запись для каждой картинки
    // иначе показываем лупу с увеличенной областью

      if (!cur_img.data('native_width')) {

        // Создаем новый объект изображение, с актуальной идентичный актуальному изображению
        // Это сделано для того чтобы получить реальные размеры изображения 
        // сделать напрямую мы этого не может, так как в атрибуте width указано др значение

        var image_object = new Image();

        image_object.onload = function() {

          // эта функция выполнится только тогда после успешной загрузки изображения
          // а до тех пор пока загружается native_width/native_height равны 0

          // определяем реальные размеры картинки
          native_width = image_object.width;
          native_height = image_object.height;  


          // Записываем эти данные
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);

          // Вызываем функцию mouseMove и происходит показ лупы 
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);

        };

        image_object.src = src;

      return;
      } else {
        // получаем реальные размеры изображения  
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }

    // Вызываем функцию mouseMove и происходит показ лупы
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });  
})
</script> 

Но есть проблема, фото на странице допустим 600 на 400, а реально фото 700 на 500. Т.е. Увеличение совсем маленькое, можно как то исходя из этого кода увеличить изображение через лупу

1 ответ 1

2

Вам надо задать backgroundSize для лупы, чтоб изменить размер изображения в ней:

$(document).ready(function(){
  var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var scale = 1;
  scaleInput.onchange = e => {
    scale = scaleInput.value;
    console.log(scale);
  }

  var ui = {
    magniflier: $('.magniflier')
  };

  // Добавляем в DOM увеличительное стекло
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);

    $('body').append(div);
  }


  // Определяем положение курсора
  var mouseMove = function(e) {

    // Получаем отступы до края картинки слева и сверху
    var magnify_offset = cur_img.offset();

    // Позиция курсора над изображением
    // pageX/pageY - это значения по х и у положения курсора от краев браузера
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;

    // Увеличительное стекло должно отображаться только когда указатель мыши находится над картинкой
    // При отводе курсора от картинки происходит плавное затухание лупы
    // Поэтому необходимо проверить, не выходит ли за границы картинки положение курсора
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      // Если условие истинно переходим дальше
      magnify(e);
    }
    else {
      // иначе скрываем
      ui.glass.fadeOut(100);
    }

    return;
  };

  var magnify = function(e) {

    // Основное изображение будет в качестве фона в блоке div glass
    // поэтому необходимо рассчитать положение фона в этом блоке 
    // относительно положения курсора над картинкой
    //
    // Таким образом мы рассчитываем положение фона
    // и заносим полученные данные в переменную
    // которая будет использоваться в качестве значения
    // свойства background-position

    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;

    // Изменяем размер..
    var bg_size = scale*cur_img.width()+'px '+scale*cur_img.height()+'px'
    // bg pos тоже надо пропорционально растянуть.
    var bg_pos = scale*rx + "px " + scale*ry + "px";


    // Теперь определим положение самого увеличительного стекла
    // т.е. блока div glass
    // логика простая: половину ширины/высоты лупы вычитаем из 
    // положения курсора на странице

    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;

    // Теперь присваиваем полученные значения css свойствам лупы
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos,
      backgroundSize: bg_size
    });

    return;
  };

  // Движение курсора над изображению
  $(ui.magniflier).on('mousemove', function() {
    // Плавное появление лупы
    ui.glass.fadeIn(100);
    // Текущее изображение
    cur_img = $(this);
    // определяем путь до картинки
    var src = cur_img.attr('src');
    // Если существует src, устанавливаем фон для лупы 
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }

    // Проверяем есть ли запись о первоначальном размере картинки native_width/native_height
    // если нет, значит вычисляем и создаем об этом запись для каждой картинки
    // иначе показываем лупу с увеличенной областью

      if (!cur_img.data('native_width')) {

        // Создаем новый объект изображение, с актуальной идентичный актуальному изображению
        // Это сделано для того чтобы получить реальные размеры изображения 
        // сделать напрямую мы этого не может, так как в атрибуте width указано др значение

        var image_object = new Image();

        image_object.onload = function() {

          // эта функция выполнится только тогда после успешной загрузки изображения
          // а до тех пор пока загружается native_width/native_height равны 0

          // определяем реальные размеры картинки
          native_width = image_object.width;
          native_height = image_object.height;


          // Записываем эти данные
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);

          // Вызываем функцию mouseMove и происходит показ лупы 
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);

        };

        image_object.src = src;

      return;
      } else {
        // получаем реальные размеры изображения  
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }

    // Вызываем функцию mouseMove и происходит показ лупы
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });  

})
.glass{
  border: 1px solid red;
  height: 150px;
  width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class='magniflier' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQalRW6ZJYzbT3VJe4JosgQIg4yeCCWNWj40npCZD0y3r0k6ezt2A' />
<input type=range id=scaleInput min=0.1 max=10 step=0.1 />

1
  • Круто, но только когда увеличиваешь на вашем примере наводишь на край лупы он показывает совсем другое
    – duddeniska
    Commented 20 нояб. 2017 в 11:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.