更改指針光標的CSS URL（使用Javascript）

我問了一個問題昨天here關於有一個使用javascript定期更改光標，使其看起來動畫。我得到了一個很好的答案（謝謝溼婆！）。我現在試圖得到兩個不同的'動畫'遊標，一個用於'自動'遊標，另一個用於'指針'遊標。更改指針光標的CSS URL（使用Javascript）

我嘗試了很多不同的方式，但只是不能解決它（我必須承認，我完全是新的 - 試圖改善）。下面是我試圖做到的一種方法：

<!DOCTYPE html> 
<html> 
<head> 

<script type = "text/javascript"> 
var images = [ 
'assets/shared/cursors/drum1.cur', 
'assets/shared/cursors/drum2.cur', 
'assets/shared/cursors/drum3.cur', 
'assets/shared/cursors/drum4.cur' 
]; 

var x = 0; 

function displayNextImage() { 
x = (x === images.length - 1) ? 0 : x + 1; 
document.body.style.cursor = 'url("' + images[x] + '"), default'; 
} 

setInterval(displayNextImage, 250); 
</script> 

<script type = "text/javascript"> 
var images = [ 
'assets/shared/cursors/point1.cur', 
'assets/shared/cursors/point2.cur', 
'assets/shared/cursors/point3.cur', 
'assets/shared/cursors/point4.cur' 
]; 

var x = 0; 

function displayNextImage() { 
x = (x === images.length - 1) ? 0 : x + 1; 
document.body.style.cursor:pointer = 'url("' + images[x] + '"), default'; 
} 

setInterval(displayNextImage, 250); 
</script> 

<body> 

<div style="height: 1000vh; width: 1000vw;"></div> 
</body> 
</html> 
</head> 
</html>

如果可能，我想不做jQuery。

再次，任何幫助真的很感激。

謝謝！ :)

來源

2017-04-14 Josey

你想要更改光標還是隻有指針光標？ – Vivick

正常光標已經'動畫'，我想要它。我對此感到高興。我想要的是一個不同的'動畫'光標，而鼠標結束（或點擊）一個鏈接，然後回到正常的'動畫'光標。 – Josey

然後，你必須做相似的事情，但每個間隔綁定一個over事件（刪除任何已經綁定的）將使用下一個圖像 – Vivick

您可以嘗試使用jQuery這個：

var images = [ 
    'assets/shared/cursors/point1.cur', 
    'assets/shared/cursors/point2.cur', 
    'assets/shared/cursors/point3.cur', 
    'assets/shared/cursors/point4.cur' 
]; 

var x = 0; 

function changeLinkCursorHoverBinding(){ 
    $("a").hover(function(){/*this is the mouseenter triggered function*/ 
    $(this).css("cursor",'url("' + images[x] + '"), default'); 
    }, function(){ 
    //handle mouseleave here if needed 
    }); 

    x = (x === images.length - 1) ? 0 : x + 1;//put at the end to start at 0 

    setTimeout(changeLinkCursorHoverBinding, 250); 
} 

$(document).ready(changeLinkCursorHoverBinding);//initial call of the function

編輯

或者沒有jQuery的：

var images = [ 
    'assets/shared/cursors/point1.cur', 
    'assets/shared/cursors/point2.cur', 
    'assets/shared/cursors/point3.cur', 
    'assets/shared/cursors/point4.cur' 
]; 

var x = 0; 

function changeLinkCursorHoverBinding(){ 
var elems = document.querySelectorAll("a"); 
elems.removeEventListener("mouseenter", onHover); 
elems.removeEventListener("mouseleave", offHover); 

elems.addEventListener("mouseenter", onHover); 
elems.addEventListener("mouseleave", offHover); 

x = (x === images.length - 1) ? 0 : x+1; 

setTimeout(changeLinkCursorHoverBinding, 250); 
} 

function onHover(){ 
    var elems = document.querySelectorAll("a"); 
    for(e in elems){ 
    e.style.cursor = "url('" + images[x] + "'), default"; 
    }//you can use the regular for loop here if you wanna 
} 

function offHover(){ 
    var elems = document.querySelectorAll("a"); 
    for(e in elems){ 
    /*handle mouseleave here*/ 
    } 
}

我不得不說出EH功能（並刪除EH每次調用）因爲我不確定如果再次調用addEventListener將覆蓋相同的處理程序。

編輯

非jQuery的方式，你需要在你的<body>標記添加onload="changeLinkCursorHoverBinding()"這樣： <body onload="changeLinkCursorHoverBinding()">（後網頁的加載初始調用）。

來源

2017-04-14 14:46:14 Vivick

謝謝Vivick。如果沒有人有另一個想法，我會試試這個，但如果可能的話，我希望沒有jQuery（對不起，我應該在我的問題中這樣說）。 – Josey

我會編輯我的答案，添加一個非jQuery版本 – Vivick

非常感謝你Vivick。我已經嘗試過了，但無法使其正常工作。我必須做一些愚蠢的事情。以下是我所做的https://pastebin.com/Mtd5F7a7 - 你能看到我出錯的地方嗎？ – Josey

更改指針光標的CSS URL（使用Javascript）

回答

相關問題