当前位置：网站首页>有意思的鼠標指針交互探究

有意思的鼠標指針交互探究

2022-07-03 06:11:00 【xuhss_com】

優質資源分享

學習路線指引（點擊解鎖）	知識定比特	人群定比特
🧡 Python實戰微信訂餐小程序 🧡	進階級	本課程是python flask+微信小程序的完美結合，從項目搭建到騰訊雲部署上線，打造一個全棧訂餐系統。
Python量化交易實戰	入門級	手把手帶你打造一個易擴展、更安全、效率更高的量化交易系統

今天，來實現這樣一個有意思的交互效果：

將原本的鼠標指針樣式，修改成自己想要的效果，並且添加上一些特殊的交互效果。

修改鼠標樣式

首先，第一個問題，我們可以看到，上圖中，鼠標指針的樣式被修改成了一個圓點：

正常而言應該是這樣：

當然，這裏比較簡單，在 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，設置為基於絕對定比特：

<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 ametp>
<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);
  });
});

我們就能完美還原出題圖的效果：