Question

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

网站显示只是大图像的一部分，当您将鼠标移到图像上时可以移动图片（鼠标向左移动 - ＆gt;图片向右移动）

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

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

控制元素的位置。

仅显示图像选择+'悬停移动效果'

1 个答案: