Curseur qui pointe la souris
0/5 (3 avis)
Vue 13 269 fois - Téléchargée 393 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.
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.
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
- Curseur qui pointe la souris
- Comment savoir sur quel fichier pointe la souris ✓ - Forum - C++ & C++ .NET
- Curseur de souris animé ✓ - Forum - Visual Basic 6
- Cacher le curseur de la souris - Codes sources - Visual Basic / VB.NET (Système)
- Visual Basic / VB.NET : Comment cacher le curseur de la souris? - CodeS SourceS - Guide
- Visual Basic / VB.NET : Comment afficher un curseur souris en couleur sans api - CodeS SourceS - Guide
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.