动画/交互式鼠标指针

时间:2016-05-30 19:05:26

标签: javascript canvas

我正在尝试添加交互式鼠标指针,类似于this page上的指针。我已经检查了很长一段时间的源代码,但根本无法解决它。

以与此页面相同的方式为鼠标指针设置动画需要什么代码?

1 个答案:

答案 0 :(得分:-1)

缩小代码在这里 - http://2f-design.fr/themes/starry/wp-content/themes/starry/js/header-pointer.js?ver=1.0

基本上它只是一个在mousemove事件上有事件监听器的画布,它会一遍又一遍地删除/重写相同的星座

// Event handling
function addListeners() {
    if(!('ontouchstart' in window)) {
        window.addEventListener('mousemove', mouseMove);
    }
    window.addEventListener('scroll', scrollCheck);
    window.addEventListener('resize', resize);
}

function mouseMove(e) {
    var posx = posy = 0;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)    {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    target.x = posx;
    target.y = posy;
}