乐趣区

关于前端:有意思的鼠标指针交互探究

jiezi

明天，来实现这样一个有意思的交互成果：

将本来的鼠标指针款式，批改成本人想要的成果，并且增加上一些非凡的交互成果。

批改鼠标款式

首先，第一个问题，咱们能够看到，上图中，鼠标指针的款式被批改成了一个圆点：

失常而言应该是这样：

当然，这里比较简单，在 CSS 中，咱们能够通过 cursor 款式，对鼠标指针形态进行批改。

利用 cursor 批改鼠标款式

cursor CSS 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应款式。

cursor: auto;
cursor: pointer;
...
cursor: zoom-out;
/* 应用图片 */
cursor: url(hand.cur)
/* 应用图片，并且设置 fallback 兜底 */
cursor: url(hand.cur), pointer;

这个大家应该都分明，通常而言，在不同场景下，抉择不同鼠标指针款式，也是一种晋升用户体验的伎俩。


当然，在本交互中， 咱们并非要将 cursor 光标设置成任一款式，刚好相同，咱们须要将他暗藏 。

通过 cursor: none 暗藏光标

在这里，咱们通过 cursor: none 暗藏页面的鼠标指针：

{cursor: none;}

如此一来，页面上的鼠标指针就隐没了：

通过全局事件监听，模仿鼠标指针

既然，隐没了，咱们就简略模仿一个鼠标指针。

咱们首先实现一个 10px x 10px 的圆形 div，设置为基于 <body> 相对定位：

<div id="g-pointer"></div>
#g-pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}

那么，在页面上，咱们就失去了一个圆形黑点：

接着，通过事件监听，监听 body 上的 mousemove，将小圆形的地位与实时鼠标指针地位重合：

const element = document.getElementById("g-pointer");
const body = document.querySelector("body");

function setPosition(x, y) {element.style.transform  = `translate(${x}px, ${y}px)`;                
}

body.addEventListener('mousemove', (e) => {window.requestAnimationFrame(function(){setPosition(e.clientX - 5, e.clientY - 5);
  });
});

这样，如果不设置 cursor: none，将会是这样一个成果：

再给 body 加上 cursor: none，就相当于模仿了一个鼠标指针：

在这个根底上，因为当初的鼠标指针，实际上是个 div， 因而咱们能够给它加上任意的交互成果 。

以文章一结尾的例子为例，咱们只须要借助混合模式 mix-blend-mode: exclusion，就可能实现让模仿的鼠标指针可能智能地在不同背景色下扭转本人的色彩。

对于混合模式这个技巧还有所疑难的，能够看看我的这篇文章：利用混合模式，让文字智能适配背景色彩

残缺的代码：

<p>Lorem ipsum dolor sit amet</p>
<div id="g-pointer-1"></div>
<div id="g-pointer-2"></div>
body {
    cursor: none;
    background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50%;
    background-color: #fff;
    mix-blend-mode: exclusion;
    z-index: 1;
}
#g-pointer-2 {
    width: 42px;
    height: 42px;
    background: #222;
    transition: .2s ease-out;
}
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;

function setPosition(x, y) {element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}

body.addEventListener('mousemove', (e) => {window.requestAnimationFrame(function(){setPosition(e.clientX, e.clientY);
  });
});

咱们就能完满还原出题图的成果：

残缺的代码，你能够戳这里：Mouse Cursor Transition

伪类事件触发

有一点须要留神的是，利用模仿的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无奈触发。

这是因为，此时被暗藏的指针上面，其实悬浮的咱们模仿鼠标指针，因而，所有的 Hover、Click 事件都触发在了这个元素之上。

当然，这个也十分好解决，咱们只须要给模仿指针的元素，增加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：

{pointer-events: none;}

鼠标追随，不仅于此

当然，这里外围就是一个鼠标追随动画，配合上 cursor: none。

而且，鼠标追随，咱们不肯定肯定要应用 JavaScript。

我在 不堪设想的纯 CSS 实现鼠标追随 一文中，介绍了一种纯 CSS 实现的鼠标追随成果，感兴趣的也能够看看。

基于纯 CSS 的鼠标追随，配合 cursor: none，也能够制作出一些有意思的动画成果。像是这样：

CodePen Demo — Cancle transition & cursor none

最初

本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版