Question

我有一个父元素，我将其设置为根据鼠标位置和运动为其动画。

我的问题是孩子们没有与父母一起“搬家”。我根本不希望它们在包装纸内的位置移动。我希望它与父对象保持在同一位置，因为我只是给父对象设置动画，但是它的移动方式似乎有所不同。一切都应该同时移动。

因此，基本上它应该看起来像它在父级移动时保持其位置一样。因此，随着父级移动，它应该与父级一起移动。而不是在里面弹跳。我在做什么错了？

谢谢！

$(window).mousemove(function(event) {
  $(".mouse-mover").css({
    "margin-left": -(event.pageX * 0.03),
    "margin-top": -(event.pageY * 0.03)
  });
});

.Animated-Bottle-Wrap {
  display:block;
  width:241px;
  height:485px;
  background:rgba(128, 128, 128, 0.45);
  background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/wine-hero.png");
}

.btl-sprite {
    background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/btl-sprite.png");
    background-repeat: no-repeat;
    display: block;
    position:absolute;
    top:231px;
    margin-left:66px;
}

.btl-design {
    width: 83px;
    height: 127px;
    background-position: -5px -5px;
    top:235px;
    margin-left:65px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouse-mover Animated-Bottle-Wrap">
<!-- Labels -->
<div id="label-slideshow" class="mouse-mover">
<div class="btl-design btl-sprite"></div>
</div>

Answer 1

$(window).mousemove(function(event) {
 $(".mouse-mover").css({
    "-webkit-transform": "translate("+-(event.pageX * 0.03)+"px,"+ -(event.pageY * 0.03)+"px)"
   
  });


});

.Animated-Bottle-Wrap {
  display:block;
  width:241px;
  height:485px;
  background:rgba(128, 128, 128, 0.45);
  background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/wine-hero.png");
}

.btl-sprite {
    background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/btl-sprite.png");
    background-repeat: no-repeat;
    display: block;
    position:absolute;
    top:231px;
    margin-left:66px;
}

.btl-design {
    width: 83px;
    height: 127px;
    background-position: -5px -5px;
    top:235px;
    margin-left:65px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouse-mover Animated-Bottle-Wrap">
<!-- Labels -->
<div id="label-slideshow" class="">
<div class="btl-design btl-sprite"></div>
</div>

孩子们没有在动画父母/包装元素中保持位置

1 个答案: