开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜