jquery - 仅显示图像的选择 + 'hover move around effect'

Question

我正在尝试创建一个像这样工作的网站。 Screenshot

网站展示的只是一张大图的一部分，将鼠标移到图片上就可以移动图片(鼠标向左移动->图片向右移动)

最好的方法是什么？我也可能想在几张照片之间切换。

Answer 1

根据您的回复，您说 This Link

提供了您想要的确切功能。基于该站点，这是他们用来维护此站点的代码。

// 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;
}

控制元素的位置。