Rainbow cursor

Soyez le premier à donner votre avis sur cette source.

Vue 9 119 fois - Téléchargée 509 fois

Description

Petite amélioration du précédent script que je vous avais proposé (curseur qui pointe la souris: http://www.javascriptfr.com/codes/CURSEUR-POINTE-SOURIS_46389.aspx)
Cette fois ci, le code est optimisé, il y a plus de précision sur les curseurs (une image tous les 4,5°) et j'ai inséré une petite touche de couleur (d'où le titre Rainbow Cursor).
Le script en lui même n'a toujours pas trouvé son intérêt mais cela permet de mieux comprendre la rotation en javascript. Si quelqu'un y trouve son utilité, qu'il me fasse signe :D

Source / Exemple :


<html>
<head>
  <title>Rainbow cursors</title>
<style type="text/css">
div.cursor {
  width: 30px; height: 30px; border: 0px; margin: 0px; padding: 0px; overflow: hidden; background-image: url(cursor.gif);
}
</style>
<script type="text/javascript">

//===[ Ajoute une fonction à un évènement ]=======================================//
function addEvent(obj, ev, fx){
  if(obj.addEventListener){obj.addEventListener(ev, fx, false);}
  else if(obj.attachEvent){obj.attachEvent('on' + ev, fx);};};

//===[ Capture la position de la souris ]=========================================//
var mouse = {x: 0, y: 0};
addEvent(document, "mousemove", function(e){ e = e || window.event;
  mouse.x = !isNaN(e.pageX)? e.pageX : e.x + document.body.scrollLeft;
  mouse.y = !isNaN(e.pageY)? e.pageY : e.y + document.body.scrollTop;});

//===[ Liste tous les objets DIV de class "cursor" ]==============================//
var cursors = new Array();
function getCursors(){ var divs = document.getElementsByTagName("div");
  for(var i in divs){ if(divs[i].className == "cursor"){cursors.push(divs[i]);};};};
addEvent(window, "load", getCursors);

//===[ Retourne les coordonnées absolues d'un objet ]=============================//
function Left(obj){
  return obj.offsetLeft + ((!obj.offsetParent)? 0: Left(obj.offsetParent));};
function Top(obj){
  return obj.offsetTop + ((!obj.offsetParent)? 0: Top(obj.offsetParent));};

//===[ Active / Calcule la rotation des curseurs ]================================//
function moveCursors(){ var i, x, y, z; for(i in cursors){
  x = mouse.x - Left(cursors[i]) - (cursors[i].offsetWidth/2);
  y = Top(cursors[i]) + (cursors[i].offsetHeight/2) - mouse.y;
  z = Math.atan2(y, x) * 180 / Math.PI;
  x = -30 * Math.floor(z % 40.5 / 4.5) + "px ";
  y = -30 * Math.floor(z / 40.5) + "px";
  cursors[i].style.backgroundPosition = x + y;};};
addEvent(document, "mousemove", moveCursors);

</script>
</head>
<body>

<!-- Pour créer un nouveau curseur, ajouter une DIV de class "cursor" -->
<div class="cursor" style="position: absolute; left: 500px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 290px"></div>

</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
mardi 27 septembre 2011
Statut
Membre
Dernière intervention
1 novembre 2011

une grande utilité: TRIPER ^^
Messages postés
103
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
9 juin 2010

Euh je viens juste de remarquer que je mets beaucoup de "lol" lol...
Messages postés
103
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
9 juin 2010

mdr Sa ma surprit lol C'est super lol Sa sert prèsque à rien mais c'est marant lol Moi je pense que je vais en mettre une flèche à chaque coin de mon site lol je pense que les visiteurs vont rester plus longtemp à s'amuser avec les flèches lol...
Messages postés
13
Date d'inscription
mardi 16 septembre 2003
Statut
Membre
Dernière intervention
13 juillet 2009

juste un mot : bluffant !!

j'adore
Messages postés
2
Date d'inscription
mercredi 27 avril 2005
Statut
Membre
Dernière intervention
30 juin 2009

Que pour Firefox (d'où le -moz ), mais il me semble que ça sera intégré au CSS3, donc faudra juste attendre la validation pour le W3C
Afficher les 12 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.