使用Javascript更改光標圖像（CSS URL）

我正在更新我的網站。我想在其中一頁上有一個動畫光標。我發現現代瀏覽器不支持.ani格式或GIF動畫，所以我有這樣的想法，我可以在舊版瀏覽器中使用.ani格式，而對於現代瀏覽器，則會有一個使用javascript更改的.png光標。使用Javascript更改光標圖像（CSS URL）

這裏是我的嘗試：

<!DOCTYPE html> 
<html> 
<head> 

<body background="example.gif"> 

<style type="text/css" id="cursor"> body {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;} </style> 

<script type = "text/javascript"> 
function displayNextImage() { 
x = (x === images.length - 1) ? 0 : x + 1; 
document.getElementById("cursor") .body images[x]; 
} 

function startTimer() { 
setInterval(displayNextImage, 400); 
} 

var images = [], x = -1; 
images[0] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum1.png'), default;}; 
images[1] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum2.png'), default;}; 
images[2] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;}; 
</script> 


<script type = "text/javascript"> 
function displayNextImage() { 
x = (x === images.length - 1) ? 0 : x + 1; 
document.getElementById("test") .src = images[x]; 
} 

function startTimer() { 
setInterval(displayNextImage, 400); 
} 

var images = [], x = -1; 
images[0] = "assets/shared/cursors/drum1.png"; 
images[1] = "assets/shared/cursors/drum2.png"; 
images[2] = "assets/shared/cursors/drum3.png"; 
</script> 

</head> 

<body onload="startTimer()"> 

<img id=test src="assets/shared/cursors/drum3.png"> 

<div style="height: 1000px; width: 1000px;"></div> 

</body> 
</html>

我把「測試」的圖像，看是否代碼工作可言，果然「測試」圖像不改變按計劃進行，但光標剛停留在'drum3.png'，不改變。我已經嘗試了很多不同的方式，但無法實現。

如果可能，我想避免使用JQuery。

任何幫助真的很感激。謝謝！

來源

2017-04-13 Josey

您可以使用這樣的事情：

var images = [ 
 
    'http://lorempixel.com/21/21/', 
 
    'http://lorempixel.com/22/22/', 
 
    'http://lorempixel.com/23/23/' 
 
]; 
 

 
var x = 0; 
 

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

 
setInterval(displayNextImage, 400);

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    cursor: url('http://lorempixel.com/20/20/'), default; 
 
}

來源

2017-04-13 14:08:08 Shiva127

非常好！非常感謝。剛剛嘗試過，它似乎工作完美！ – Josey

我無法工作，如何也有.ANI回退光標，所以不是我改變了我的.png文件來。 cur文件，可在新舊瀏覽器中使用。因此，該代碼最終看上去像這樣：

<!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> 

<body> 

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

再次感謝您的溼婆。沒有你，我無法做到這一點。

我在這裏問了一個相關但不同的問題：Changing CSS URL for pointer cursor (using Javascript)

來源

2017-04-14 10:54:48 Josey

使用Javascript更改光標圖像（CSS URL）

回答

相關問題