javascript - 变换 - 鼠标在父对象上移动时图像的原点

Question

当用户在图像父元素上执行 mousemove 时，我试图在 img 上添加平滑移动效果(此处为 .carousel-img)但我无法正常运行它。

我做错了什么？

$('.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-origin属性而不是 transform属性(property)。您想使用 translate(x,y) 来定义您正在寻找的运动。

您还应该包括到您的 img 选择器的过渡，以便移动流畅。我还添加了一些其他属性，这些属性在添加更复杂的动画(例如 translate3D 类型)时可能会有用。

检查下面更新的代码段。

$('.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>