Question

通过汇总一些先前的答案，我设法将多个div元素3D旋转到光标（与眼睛类似的行为）。但是，仍然存在一些小错误：

在水平移动光标的某个点上，阴影会“突然”破坏。
如果光标位于所有4个元素的中间，我会期望对称行为。但事实并非如此......

有人可以帮我解决这个问题吗？

这里是代码（和笔：http://codepen.io/anon/pen/pJROyL）

$(document).ready(function() {
  var browserPrefix = "",
    usrAg = navigator.userAgent;
  if (usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
    browserPrefix = "-webkit-";
  } else if (usrAg.indexOf("Opera") > -1) {
    browserPrefix = "-o";
  } else if (usrAg.indexOf("Firefox") > -1) {
    browserPrefix = "-moz-";
  } else if (usrAg.indexOf("MSIE") > -1) {
    browserPrefix = "-ms-";
  }

  $(document).mousemove(function(event) {

    $('.box').each(function() {
      elOffset = $(this).offset();
      elWidth = $(this).width();
      elHeight = $(this).height();
      elCenterX = elOffset.left + elWidth / 2;
      elCenterY = elOffset.top + elHeight / 2;

      dx = event.pageX - elCenterX;
      dy = event.pageY - elCenterY;
      tiltx = Math.min((dy / elCenterY), 1);
      tilty = -Math.min((dx / elCenterX), 1);
      radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
      degree = (radius * 30);

      shadx = degree * tiltx;
      shady = degree * tilty;

      $(this).css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
      if (dx > elCenterX) {
        $(this).css('box-shadow', +(-shady) + 'px ' + (-shadx) + 'px 5px #3D352A');

      } else {
        $(this).css('box-shadow', +shady + 'px ' + (-shadx) + 'px 5px #3D352A');
      }
    });
  });
});

Answer 1

对于对称问题，解决方案是偏移体宽的一半：

bodyHalfWidth = $('body').width()/2;
// ... More code ...
tilty = -Math.min(dx / (elCenterX  + bodyHalfWidth), 1);

这会降低效果，因此我会增加一个增益常数。

bodyHalfWidth = $('body').width()/2;
gain = 2;
// ... More code ...
tilty = -Math.min(gain*dx / (elCenterX  + bodyHalfWidth), 1);

（编辑：George Lee的其他子问题解决方案也在这里发布，以巩固整体答案）

要修复影子破坏，请移除最后一个if语句if(dx > elCenterX)，然后只留下$(this).css('box-shadow', +shady + 'px ' + (-shadx) + 'px 5px #3D352A');

使div看向光标

1 个答案: