Rainbow cursor

Télécharger le projet
Commenter

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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (wackybacky)