主页 / 问题 / 1072673
Accepted
MoloF
Asked:2020-01-22 02:06:09 +0000 UTC2020-01-22 02:06:09 +0000 UTC

Vue.js | 鼠标光标磁铁，悬停时的磁性效果

  • 772

我无法创建磁化效果，我尝试从这里开始效果，但没有成功

链接到工作结果。| 链接到第二个工作结果。

链接到我的结果。（vue上的代码，所以我把它贴在sanbox上）

悬停时，缩放效果有效，但磁化效果无效。

кода нет, все в песочнице
vue.js

2 个回答

  1. Best Answer

    发生了这样的事情：

    let actual = [0, 0, 0], target = [0, 0, 0], xy = [0,0];
let elements = [...document.querySelectorAll('a')];
addEventListener('mousemove', requestCursorPosition);
addEventListener('scroll', requestCursorPosition);
requestAnimationFrame(moveCursor);

function requestCursorPosition(e) {
    let X = xy[0] = (e.x || xy[0]);
    let Y = xy[1] = (e.y || xy[1]);
    let snap = elements.map(el => {
        let r = el.getBoundingClientRect();
        let x = r.x + r.width/2 - X;
        let y = r.y + r.height/2 - Y;
        return [x, y, x*x + y*y];
    }).find(el => el[2] < 900);
    
    target[0] = (snap ? snap[0] : 0) + X + window.pageXOffset;
    target[1] = (snap ? snap[1] : 0) + Y + window.pageYOffset;
    target[2] = snap ? 15 : 5;
}

function moveCursor() {
    for (var i=0; i<3; i++)
        actual[i] += (target[i] - actual[i])/5;
    
    document.body.style.background = 
        `radial-gradient(
            circle at ${actual[0]}px ${actual[1]}px, 
            #0000, 
            #0000 ${actual[2]}px, 
            #0007 ${actual[2]+1}px,
            #0007 ${actual[2]+2}px,
            #0000 ${actual[2]+3}px)`;
            
    requestAnimationFrame(moveCursor);
}
    body {
    height: 200vh;
    margin: 0;
}

a {
  padding: 10px;
  display: inline-block;
}
    <a href=#>test 1</a>
<a href=# style="position:absolute;bottom:20px">test 2</a>
<a href=#>test 3</a>
<a href=# style="float:right">test 4</a>

    • 6

  2. 这是一个以元素而不是背景作为光标的变体

    let elements = [...document.querySelectorAll('a')];
addEventListener('mousemove', e => {
    let snap = elements.map(el => {
        let r = el.getBoundingClientRect();
        let x = r.x + r.width/2 - e.x;
        let y = r.y + r.height/2 - e.y;
        return [x, y, x*x + y*y]; 
    }).find(el => el[2] < 900);
    cursor.style.left = (snap?snap[0]*0.7-11:0) + e.x + window.pageXOffset - 7 + 'px';
    cursor.style.top =  (snap?snap[1]*0.7-11:0) + e.y + window.pageYOffset - 7 + 'px';
    cursor.style.height = cursor.style.width = (snap ? 36 : 14) + 'px';
    cursor.style.border = (snap ? 2 : 1.1) + 'px solid #0005';
});
    body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#cursor {
  pointer-events: none;
  transition: 0.2s ease-out;
  border-radius: 50%;
  display: block;
  position: absolute;
}
    <a href=#>test 1</a>
<a href=#>test 2</a>
<a href=#>test 3</a>
<a href=# style="float:right;display:inline-block;margin:100px">test 4</a>
<div id=cursor></div>

    • 3

相关问题