Curseur qui pointe la souris

Télécharger le projet
Commenter

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.
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)