jquery - 孩子们没有在动画父/包装元素中保持他们的位置
问题描述
我有一个父元素,我将其设置为根据鼠标位置和移动为其位置设置动画。
我遇到的问题是孩子们没有“和”父母一起移动。我根本不希望他们在包装内的位置移动。我希望它与父母移动时保持在同一个地方,因为我只是为父母设置动画,但它似乎移动不同。一切都应该同时移动。
所以基本上它应该看起来像它在父移动时保持它的位置。所以它应该随着父母的移动而移动。而不是在里面蹦蹦跳跳。我究竟做错了什么?
谢谢!
$(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>
解决方案
$(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>
推荐阅读
- python - 是否有一种算法可以使用不同的数据约束进行平均?
- reactjs - 如何在 SPA 应用程序中发送/订阅通知以检查持久功能的状态?
- grafana - 如何使用 SpringBoot 2、InfluxDB 和 Grafana 理解微米指标?
- android - 在 Gridlayout 内的 MaterialCardView 中找不到属性 layout_columnWeight
- javascript - gojs中用坐标指定链接的路径
- java - 弹簧靴。CORS。'allowCredentials = false' 不起作用
- c++ - 与初始化列表共享数据是否在标准范围内有效?
- python - RuntimeError:mat1 和 mat2 形状不能相乘(28x28 和 784x256)
- c++ - 在 FFMPEG 的 C++ 代码中使用最短参数
- docker - 推送到远程后在本地注册表中保留长 Docker 标签?