Показывать только выбор изображения + «эффект наведения вокруг»

Question

Я пытаюсь создать сайт, который работает следующим образом. Снимок экрана

Веб-сайт показывает только часть большого изображения, и вы можете перемещать изображение, когда наводите указатель мыши на изображение (мышь влево -> изображение перемещается вправо)

Каков наилучший способ сделать это?Я также мог бы хотеть переключиться между парой картин.

Answer 1

Исходя из своего ответа, вы сказали, что Эта ссылка

предоставила именно ту функциональность, которую вы хотели.Основываясь на этом сайте, это код, который они используют для поддержки этого.

// enable the zoominess
  if( image.originalWidth > wrapperWidth ){
    $(settings.activeImageId).width(wrapperWidth).height(wrapperHeight).hover(function(){
      // zoom in
      $(this).addClass('zoomed').width(image.originalWidth).height(image.originalHeight);
      $activeWrapper.mousemove( function(e){
        var localX = ~~(((e.pageX - $activeWrapper.offset().left)/wrapperWidth) * 100);
        var localY = ~~(((e.pageY - $activeWrapper.offset().top)/wrapperHeight) * 100);
        if( localY > 100 ){ localY = 100; }
        var fromLeft = (image.originalWidth - wrapperWidth) * localX/100;
        var fromTop = (image.originalHeight - wrapperHeight) * localY/100;
        //console.log( fromLeft,' :: ', fromTop);
        $(settings.activeImageId).css('left', -fromLeft+'px').css('top', -fromTop+'px');
      });
    },
    function(){
      // zoom out
      $(this).removeClass('zoomed').width(wrapperWidth).height(wrapperHeight);
      $activeWrapper.unbind('mousemove');
    });
  }
} 

И они используют:

#active-wrapper .zoomed {
  left: 0;
  position: absolute;
  top: 0;
}

Для управления положением элемента.