html css cursor pointer 游標 js

Pointer.js：輕鬆更換游標樣式的好用套件

王淳藝 Celia Wang 2022/10/24 11:18:20

0 1344

在一般正常情況下的網頁上，游標都是以一個單純的箭頭來呈現，如果想來點創新的樣式，Pointer.js套件是一個很好的選擇！

----

STEP 1. 下載Pointer.js完整檔案

前往這個網站將套件檔案下載，並將 pointer.css 及 pointer.js 分別放入專案中對應的資料夾，再將其引入html檔中。

<link rel="stylesheet" href="../css/pointer.css">

<script src="../js/pointer.js"></script>

STEP 2. 使用預設選項初始化套件

在html的<body>結尾之前加上初始化的設定：

<script>
    init_pointer();
</script>

STEP 3. 加入定義樣式的設定

在step 2 的設定中加入以下條件：

1. pointerColor --- 更改游標外圍圓圈顏色

2. ringSize --- 設定游標外圈的圓半徑大小

3. ringClickSize --- 設定游標點擊時外圈的圓半徑大小

<script>
  init_pointer({
    pointerColor: 333333,
    ringSize: 20,
    ringClickSize: 10
  });
</script>

在這邊要特別注意的是，這三個條件務必要打上，才不會有產生錯誤的情況發生喔！

STEP 4. 調整pointer.css檔案中的參數

接著可以進入pointer.css檔案中，調整各種原先套件預設的參數

#pointer-dot {
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background-color: darkcyan;
  position: fixed;
  border-radius: 4px;
  z-index: 101;
  pointer-events: none;
  -webkit-transition: border-color 0.5s;
  -o-transition: border-color 0.5s;
  transition: border-color 0.5s;
}

#pointer-ring {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 15px;
  border: 2px solid rgb(156, 42, 205);
  position: fixed;
  border-radius: 100px;
  z-index: 102;
  pointer-events: none;
}

html {
  cursor: none !important;
}

a {
  cursor: none !important;
}