画像の選択のみを表示+「ホバー移動の効果」

Question

私はこのように動作するウェブサイトを作成しようとしています。 Screenshot

ウェブサイトのショーは大きな画像の一部だけだとあなたがイメージ上にマウスを移動するときに画像を移動することができます（左のマウス - >画像が右に移動）

最良の方法は何ですかそれをするために？私はまた、2枚の写真を切り替えることもできます。あなたの応答に基づいて

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

要素の位置を制御します。