2016-09-18 113 views

回答

0

兩種方式來實現你想要的。

CSS的方式

如果你想完全自主的光標,你可以使用cursor其接受的圖像(在你的情況下,爲.gif!)

._show-loader:hover { 
    cursor: url('http://i117.photobucket.com/albums/o72/redfenderstrat/Debian_Rotate.gif'); 
} 

我喜歡這種方法因爲我更願意儘可能地讓JS擺脫我純粹的設計。

jQuery的方式

如果您需要用戶的光標後添加動畫(以使其更自然的,因爲人不具有相同的光標),這個jQuery的替代將會使圖像棒光標。

var $showLoader = $('._show-loader'); 

$showLoader.on('mousemove', function(e) { 
    var cursorPos = { 
    left: e.pageX + 20, 
    top: e.pageY + 20, 
    } 

    $("._cursor-onLoad").css({ 
    left: cursorPos.left, 
    top: cursorPos.top 
    }); 
}); 

$showLoader.on('mouseenter', function() { 
    $('._cursor-onLoad').css({ 
    display: 'block', 
    }) 
}); 

$showLoader.on('mouseleave', function() { 
    $('._cursor-onLoad').css({ 
    display: 'none', 
    }) 
}); 

JSFiddle here

我並不真的很喜歡這個選擇,因爲它這個2002年低迷的影響。

+0

這是有點我想要的。但我想改變藍色的圓圈。例如,當頁面正在加載。我想要的是有Mac加載動畫。 [點擊此處查看圖片](https://upload.wikimedia.org/wikipedia/commons/7/7e/OS_X_10.11_Beta_Beach_Ball.jpg) –

+0

Mac動畫是「Mac」動畫,因爲您在Mac上。在Windows上,您將擁有「Windows動畫」。這是一個原生的行爲,所以如果你想改變Mac動畫,你可以下載這個動畫的.gif,自定義它,然後嘗試以上解決方案 –

+0

但上面的例子只是添加另一個動畫,而不是替換窗口動畫。我想知道我是否可以在我的網站上替換它。 –