親のマウス移動の画像の起源が

Question

imgにスムーズな移動効果を追加しようとしていますが、ユーザーが画像の親要素（ここでは.carousel-img）にmousemoveを実行すると正しく移動できません。

このデモを見て、私が間違っていることを教えてください。

$('.carousel-img').on('mousemove', function(e){ 
 
    $('.carousel-img img').css({'transform-origin': ((e.pageX - $('.carousel-img img').offset().left)/$('.carousel-img img').width()) * 100 + '% ' + ((e.pageY - $('.carousel-img img').offset().top)/$('.carousel-img img').height()) * 100 +'%'}); 
 
    })

html, body{height:100%; width:100%;} 
 
.box{position: relative; height:100%; width:100%;} 
 
.carousel-img { 
 
    position: absolute; 
 
    right:0; 
 
    bottom:0; 
 
    left: 0; 
 
    top:0; 
 
    padding:100px; 
 

 
} 
 
.carousel-img img { 
 
    position: relative; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
     <img src="http://placehold.it/1920x600/fff/fff"> 
 
     <div class="carousel-img"> 
 
     <img src="http://placehold.it/200x150/ff0000/ff0000" > 
 
     </div> 
 
</div>

Answer 1

代わりtransformプロパティのtransform-originプロパティを変更しています。あなたはあなたが探している動きを定義するためにtranslate(x,y)を使いたいと思っています。

imgセレクタへのトランジションも含めて、動きが滑らかになるようにする必要があります。また、translate3Dタイプなどの複雑なアニメーションを追加するときに便利なその他の属性も追加しました。

以下のアップデートスニペットを確認してください。あなた `transform`プロパティが宣言されている

$('.carousel-img').on('mousemove', function(e) { 
 
    var translateX = ((e.pageX - $('.carousel-img img').offset().left)/$('.carousel-img img').width()) * 100; 
 
    var translateY = ((e.pageY - $('.carousel-img img').offset().top)/$('.carousel-img img').height()) * 100; 
 
    var translateProperty = 'translate(' + translateX + '%, ' + translateY + '%)'; 
 

 
$('.carousel-img img').css({ 
 
    '-webkit-transform': translateProperty, 
 
    '-moz-transform': translateProperty, 
 
    '-ms-transform': translateProperty, 
 
    '-o-transform': translateProperty, 
 
    'transform': translateProperty 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.carousel-img { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 100px; 
 
} 
 

 
.carousel-img img { 
 
    position: relative; 
 
    
 
    /* Add transition */ 
 
    transition: all 0.2s ease; 
 
    -webkit-transition: all 0.2s ease; 
 
    /* Default values for transition to be possible */ 
 
    transform: translate3d(0, 0, 0); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
     <img src="http://placehold.it/1920x600/fff/fff"> 
 
     <div class="carousel-img"> 
 
     <img src="http://placehold.it/200x150/ff0000/ff0000" > 
 
     </div> 
 
</div>