css - Web 应用程序中的动画光标支持？

Question

是否有网络浏览器支持动画光标？

我一直在网络上搜索以将自定义光标添加到我的网络应用程序中。我一直在寻找大量非动画 (.cur) 和动画 (.ani) 光标，并使用正确的 CSS 以便我的应用程序具有自定义光标!我试过的网络浏览器似乎不支持动画光标，我想知道是否有任何方法可以将动画光标放入我的网络应用程序中。

Answer 1

您可以借助一些 javascript 实现它:

添加到您的 css

#container {
   cursor   : none;
}

#cursor {
  position  : absolute;
  z-index   : 10000;
  width     : 40px;
  height    : 40px;
  background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}

然后添加到你的js

纯 Javascript 版本

// Set the offset so the the mouse pointer matches your gif's pointer
var cursorOffset = {
   left : -30
 , top  : -20
}

document.getElementById('container').addEventListener("mousemove", function (e) {
  var $cursor = document.getElementById('cursor')

  $cursor.style.left = (e.pageX - cursorOffset.left) + 'px';
  $cursor.style.top = (e.pageY - cursorOffset.top) + 'px';

}, false);

Jquery 版本

$('#container').on("mousemove", function (e) {
  $('#cursor').offset({ 
     left: (e.pageX - cursorOffset.left)
   , top : (e.pageY - cursorOffset.top)
  })

});