Question

我正在尝试使用wordpress和divi主题在我的网站www.effevisual.altervista.org中创建一个跟随光标的球。

我多次尝试了这段代码，没有任何问题，但实际上看起来像是物体挡住了球。

我还希望在光标悬停在链接上时，尽可能将球更改为不透明。

<body onload = "followMouse();">
<div class="wrap">
<div id="ball"></div>
</div></body>

.wrap {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}

#ball {
     width: 20px;
     height: 20px;
     background: #0034fc;
     border-radius: 50%;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -10px 0 0 -10px;
     pointer-events: none;
}

 var $ = document.querySelector.bind(document);
 var $on = document.addEventListener.bind(document);

 var xmouse, ymouse;
 $on('mousemove', function (e) {
      xmouse = e.clientX || e.pageX;
      ymouse = e.clientY || e.pageY;
 });

 var ball = $('#ball');
 var x = void 0,
      y = void 0,
      dx = void 0,
      dy = void 0,
      tx = 0,
      ty = 0,
      key = -1;

 var followMouse = function followMouse() {
      key = requestAnimationFrame(followMouse);

      if(!x || !y) {
           x = xmouse;
           y = ymouse;
      } else {
           dx = (xmouse - x) * 0.125;
           dy = (ymouse - y) * 0.125;
           if(Math.abs(dx) + Math.abs(dy) < 0.1) {
                x = xmouse;
                y = ymouse;
           } else {
                x += dx;
                y += dy;
           }
      }
      ball.style.left = x + 'px';
      ball.style.top = y + 'px';
 };

 </script>

任何消息错误，只是球没有正确跟随。

Answer 1

所以我发现您正在将转换应用于类.et_pb_code_0。 transform: translateX(-89px) translateY(-81px) rotateX(0deg) rotateY(0deg) rotateZ(90deg);仅此一项就使您的球转向了另一个方向，使得左右上下左右移动，现在左右上下移动。除此之外，包装程序和ball类还包含在其他许多div中，这些div将其定位在页面的左上方。我可以通过将wrap类拖动到main-content1类下的顶部来在检查器中对其进行修复。

您还必须将position:fixed应用于wrap类，以使其始终显示在屏幕上。还有z-index用于页面的较低位置。还有pointer-events:none，因此您可以单击链接。

类似的东西可以帮助您入门：

jQuery( "li" ).mouseenter(function() { jQuery( "#ball" ).fadeTo( "slow" , 0, function() { // Animation complete. }); }); jQuery( "li" ).mouseleave(function() { jQuery( "#ball" ).fadeTo( "slow" , 1, function() { // Animation complete. }); });

如何修复仅在wordpress网站上不起作用的javascript onmousemove

1 个答案: