2016-12-06 6 views
1

ich den Cursor-Symbol ändern möchten, während Sie den folgenden Code wartet mit fand ich hier:Mit Schrift genial als Cursor

var canvas = document.createElement("canvas"); 
 
canvas.width = 100; 
 
canvas.height = 110; 
 
document.body.appendChild(canvas); 
 

 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "#000000"; 
 
ctx.font = "20px FontAwesome"; 
 
ctx.textAlign = "center"; 
 
ctx.textBaseline = "middle"; 
 
ctx.fillText("\uf245", 35, 25); 
 
ctx.font = "35px FontAwesome"; 
 
ctx.fillText("\uf013", 55, 15); 
 

 
var dataURL = canvas.toDataURL('image/png') 
 
$('body').css('cursor', 'url(' + dataURL + '), auto');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Wer weiß, wenn ich den Gang dreh machen kann?

+1

Ich glaube, die einzige Möglichkeit, etwas animiert als Cursor zu tun ist, den Cursor als keine setzen und ersetzen Sie es mit Ihrem benutzerdefinierten Element über js Tracking-Maus Position – juvian

+0

Sie haben Recht! Ich habe nicht nach dem animierten Cursor gesucht. deshalb habe ich es nicht gefunden. Danke! – themis93

Antwort

0

Verwenden Sie einfach CSS cursor:wait. Dies verwendet die eigenen Cursor-Einstellungen des Benutzers, die Sie verwenden sollten, da dies den Benutzern hilft, den Prozess besser zu verstehen. Konsistenz ist sehr wichtig.

html,body {height:100%} 
 
body {cursor:wait}

Scheint mir gut.

Verwandte Themen