Javascript cursor replacement

I'm looking to use an animated cursor in JS. CSS custom cursors do not animate in most browsers.

I have heard of people (can't recall who) doing this. They hide the 开发者_开发知识库regular cursor (by setting a transparent custom cursor), then create an image that follows the cursor in JS.

Anyone have any better ideas to achieve animated cursors? Is there a jquery plugin that will do this for you? I recall reading a blog that talks about this. Anyone heard of people doing this before?

Thanks.

---

Have you tried using .ani cursors? Also see controlling cursors with css. I guess you could try to hack this together yourself, but I don't see how you're going to hide the original cursor. Do you really need anything other than the widely supported usualy functionality?

li { cursor: text; }
a {cursor: pointer;}

---

You can use a transparent cursor, but some in some browsers it will show a black square instead of being transparent. Also, I have seen a couple examples that use canvas to add effects to the cursor.

A possible example http://jsfiddle.net/5mN9p/ borrowed from this question Animated image mask following mouse in HTML

All I added was

body{cursor:none;}

or possibly

canvas{cursor:none;}

Which means you can draw anything you want on the canvas at the mouse's coordinates.

---

Not tried this, but you should be able to create a custom CSS rule (create a class, like .customcursor, set the cursor to url(/path/to/image.png) and then, on a setInterval() cycle between images. Then apply that to your document body.

I haven't a clue how often you can run this, but it should work.