如何使 parallax 与div的中间对齐?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (31)

我创建了一个使用鼠标坐标移动的视差效果。效果正在起作用,但我无法获得水平和垂直居中父视图的红框位置,因此视差在红框和父视图内是活动的:

function mouseMove(event) {
  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var w = target.width();
  var h = target.height();
  var top = offset.top;
  var left = offset.left;

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

  TM.to(dot, 1, { x: mX, y: mY, scale: 1, ease: Quint.easeOut, force3D: !0 });


  var icon = $('.icon');
    var iWidth = icon.width();
    var iHeight = icon.height();

        var factor = .05;
        var x = ((event.pageX - left) - (iWidth / 2)) * factor;
        var y = ((event.pageY - top) - (iHeight / 2)) * factor;

  TM.to(icon, 1, { x: x, y: y, scale: 1, ease: Quint.easeOut, force3D: !0 });


};

更新

提问于
用户回答回答于

margin: 0 auto是你需要的。

.icon {
    height: 150px;
    width: 150px;
    display: block;
    background: red;
    margin: 0 auto;
}

扫码关注云+社区

领取腾讯云代金券