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.
精彩评论