Curseur qui pointe la souris

Soyez le premier à donner votre avis sur cette source.

Vue 13 316 fois - Téléchargée 397 fois

Description

Dans la série des codes pas très utiles mais qui font toujours effet (dans un menu circulaire par exemple), voici donc un script (compatible IE & FF comme tjrs) qui, lors de l'appel de la fonction arrow360(), inclus dans la page un élément DIV dont le background est un curseur qui pointe la souris (en utilisant le système de tiroir)... génial me direz-vous! même moi je me demande encore pourquoi j'ai fais ça... bref, la fonction retourne l'objet DIV et vous pourrez le modifier si besoin est. Bonne exploitation à vous! laissez moi vos avis svp.

Source / Exemple :


<html>
<head>
  <title>Arrow360</title>
</head>
<body bgcolor="#92BFEB">

<script language="JavaScript">

//-> Créé & retourne un objet HTML de type [tag] dans [parent]
function HTMLobject(tag, parent){
  var div, obj = document.createElement(tag);
  if(parent){parent.appendChild(obj);} else{
    document.write("<div id=target></div>");
    div = document.getElementById("target");
    div.parentNode.replaceChild(obj, div);};
  return obj;};

//-> Retourne la position LEFT & TOP relative à body de [l'objet]
function Left(obj){
  return (!obj.offsetParent)? obj.offsetLeft:
    obj.offsetLeft + Left(obj.offsetParent);};
function Top(obj){
  return (!obj.offsetParent)? obj.offsetTop:
    obj.offsetTop + Top(obj.offsetParent);};

//-> Assigne les coordonées du curseur à la variable mouse.{x,y}
var Mouse = {x: 0, y: 0};
document.onmousemove = function(e){
  Mouse = (e)? {x: e.pageX, y: e.pageY}:
   {x: event.x + document.body.scrollLeft,
    y: event.y + document.body.scrollTop};};

//-> Créé & retourne un objet div dont le background pointe mouse
var Arrow360 = new Object();
Arrow360.item = new Array();
Arrow360.move = function(){
  for(var i in Arrow360.item){
    if(Arrow360.item[i].active)
    Arrow360.item[i].move();};};
Arrow360.create = function(angle){
  var obj = HTMLobject("div");
  obj.image = "url(arrow360.gif)";
  obj.style.width  = "30px";
  obj.style.height = "30px";
  obj.x = obj.offsetWidth / 2 + Left(obj);
  obj.y = obj.offsetHeight / 2 + Top(obj);
  obj.move = function(angle){ if(!angle){
    var dx = Mouse.x-obj.x, dy = obj.y-Mouse.y;
    angle = Math.atan2(dy, dx) * 180/Math.PI;};
    angle = (angle>355)? angle-355: angle+5;
    var moveX = " " + 30*(-Math.floor(angle/10)%9) + "px",
        moveY = " " + 30*(-Math.floor(angle/90)) + "px";
    obj.style.background = obj.image + moveX + moveY;};
  obj.active = (angle)? false: true; if(angle) obj.move(angle);
  obj.onclick = function(){obj.active = (!obj.active);};
  obj.ondblclick = function(){Arrow360.timer = (Arrow360.timer)?
    clearInterval(Arrow360.timer): setInterval(Arrow360.move, 10);};
  Arrow360.item.push(obj); return obj;};

Arrow360.timer = setInterval(Arrow360.move, 10);
</script>

<div align="center" style="width: 100%; margin-top: 200px">
<script language="JavaScript">
var test1 = Arrow360.create();
var test2 = Arrow360.create();
var test3 = Arrow360.create();
var test4 = Arrow360.create();
var test5 = Arrow360.create(50);
var test6 = Arrow360.create(60);
var test7 = Arrow360.create(70);
var test8 = Arrow360.create(80);
var test9 = Arrow360.create(90);
</script>
</div>

<!-- test = DIV contenant la flèche / style modifiable -->
<!-- un click sur le DIV fait stopper la flèche (OUF!) -->
<!-- un dblclick sur un DIV fige tous les autres DIV   -->

</body>
</html>

Conclusion :


Un bug connu pour lequel j'ai la flème de le corriger: au redimentionnement d'une fenêtre, la position relative de l'objet DIV (par rapport à BODY) n'est pas recalculée... bref ça fait un point de rotation ailleurs que là où il faudrait... je vous laisse vous en charger.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
mardi 26 octobre 2004
Statut
Membre
Dernière intervention
18 avril 2008

Merci FraGag, c'est effectivement la fonction atan2(y, x) (que je ne connaissait pas) on en apprend tous les jours :). Pour LAKICHEMOLE, j'ai bien pensé à utiliser un timer commun pour toutes les flèches... c'est juste que je ne sais pas quoi faire comme "action utilisateur" pour stopper les flèches (si celles-ci lui bouffent trop de cpu): peut-être qu'un clique sur une seule les arrêterait toutes? A voir...
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

Excelent reste plus qu'à trouver une utilité ^^
Mais le rendu est pas mal(fluide)!
Sinon pour ton setInterval pourquoi tu ne fait pas une fonction qui gère plusieurs curseurs et qui les rafraichie une fois tous enssemble?
genre une globale var objArrow = new Array(); que tu remplis à chaque new Arrow360 et tu appel une méthode à part dans ton setInterval du genre setInterval(changeAllAngle,10);
function changeAllAngle
{
for(i=0;i<objArrow.length;i++){objArrow[i].changeAngle;}
}
Enfin je dis ça je dis rien y a peut être des truc auquel j'ai pas pensé :) Mais je pense que si tu le fait et que t'en mais une bonne centaine sur une page y a moyen de faire un truc psychadelic :)
Messages postés
81
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
18 avril 2008

Ta fonction AngPol, en fait, c'est atan2 ?
http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core:Objets_globaux:Math:atan2
(Attention, l'ordre des arguments est inversé.)

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.