我正在尝试使用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>
任何消息错误,只是球没有正确跟随。
答案 0 :(得分:0)
所以我发现您正在将转换应用于类.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.
});
});