0/5 (3 avis)
Vue 13 269 fois - Téléchargée 393 fois
<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>
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 :)
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.