javascript - 鼠标悬停时旋转

Question

我有这个功能，但有两个问题我无法解决，第一个是鼠标操作设置在整个屏幕上，我希望它仅在悬停在潜水“ehab”上时，而不是当我将鼠标移到屏幕上，另一个问题是，当我有多个 div 时，该函数仅适用于第一个......请告诉我

    /*
        By     : Ofelquis
        Twitter: @felquis
        Blog   : tutsmais.com.br

        Simples implementação ;)
    */
    !(function ($doc, $win) {
        var screenWidth = $win.screen.width / 2,
            screenHeight = $win.screen.height / 2,
            $ehab = $doc.querySelectorAll('#ehab')[0],
            validPropertyPrefix = '',
            otherProperty = 'perspective(600px)';

            if(typeof $ehab.style.webkitTransform == 'string') {
                validPropertyPrefix = 'webkitTransform';
            } else {
                if (typeof $ehab.style.MozTransform == 'string') {
                    validPropertyPrefix = 'MozTransform';
                }
            }

        $doc.addEventListener('mousemove', function (e) {
            // vars 
            var centroX     = e.clientX - screenWidth,
                centroY     = screenHeight - (e.clientY + 13),
                degX   = centroX * 0.1,
                degY   = centroY * 0.1

            // Seta o rotate do elemento
            $ehab.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)';
        });
    })(document, window);

Answer 1

第一个问题，(我希望它是在悬停 div“#ehab”时出现的)，您需要将 mousemove 事件附加到您的 div:

$ehab.addEventListener('mousemove', function (e) {
     //You code here.
});

第二个问题，(当我有多个 div 时，该函数仅适用于第一个)，您的 DOM 树上不能有重复的 ID，请将选择器更改为class，例如.ehab，那么你必须循环遍历匹配的元素，请尝试以下代码:

/*
                By     : Ofelquis
                Twitter: @felquis
                Blog   : tutsmais.com.br

                Simples implementação ;)
            */
    !(function($doc, $win) {
      var $ehabDIVs = $doc.querySelectorAll('.ehab'),
        otherProperty = 'perspective(600px)';


      for (var i = 0; i < $ehabDIVs.length; ++i) {
        var $ehab = $ehabDIVs[i];

        $ehab.addEventListener('mousemove', function(e) {
          // vars 
          var centroX = (e.pageX - this.offsetLeft) - this.offsetWidth/2,
            centroY = this.offsetHeight/2 - (e.pageY-this.offsetTop),
            degX = centroX * 0.1,
            degY = centroY * 0.1
          if(this._leave) clearInterval(this._leave);
          // Seta o rotate do elemento
          this.style.transform = otherProperty + 'rotateY(' + degX + 'deg)  rotateX(' + degY + 'deg)';
        });

        $ehab.addEventListener('mouseleave', function(e) {
          var self = this;
          this._leave = setTimeout(function() {
              self.style.transform = 'rotateY(0deg)  rotateX(0deg)';
          }, 250);
        });

      }
    })(document, window);

.ehab {
  width:300px;
  height:300px;
  background-color:red;
  margin:15px;
  float:left;
  transition: transform 0.15s ease;
}

<div class="ehab">First Div</div><div class="ehab">Second Div</div>

祝伊斯梅尔好运。