自定义加载光标

Question

我想知道是否有方法来更改“进度”光标的加载动画。就像在这个CSS-Trick帖子中改变光标一样。

Answer 1

两种方式来实现你想要的。

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年低迷的影响。