Par Nicolas SUPRIN, jeudi 14 juin 2007 à 21:58 | Javascript | #108 | rss
Comme le titre l'indique, je viens de créer une classe permettant de gérer les mouvements de la souris, à base de callback en javascript.
Description
La detection de la position de la souris est souvent rébarbative, et comme à son habitude, javascript donne du fil à retordre pour être compatibile sur tous les navigateurs.
Cette classe permet d'ecouter le onmousemove sur le document (document.onmousemove = function() {...}), et laisse la possibilité de créer un (ou plusieurs) callback.
Et ce, de façon simplissime, et compatible sur les principaux navigateurs (FF, IE > 6, Opéra, Safari...)
Exemple
Le code :
Voici le code javascript permettant de faire bouge le div lors du mouvement de la souris :
/** * une pseudo classe pour faire joli * on crée une nouvelle instance Move dans le onload de la page. */ CMove = function () { // Le div a déplacer this._div = document.getElementById('divabouger') /** * Ceci est notre fonction de callback, * qui recevra directement les coordonnées * en parametres x et y */ this.run = function (x, y) { // et hop, on change les propriétés top et left du style du div with (Move._div) { style.left = x + 'px'; style.top = y + 'px'; } // et c'est fini } /** * Mouse, est l'instance de la classe que j'ai développée * On lui ajoute notre fonction de callback, * en donnant le nom mouse a notre callback * pour pouvoir le supprimer si on veux plus tard * avec l'appel Mouse.removeCallback('mouse'); */ Mouse.addCallback('mouse', this.run); }
Le code source le classe
CMouse = function () { this.I_mouseX = 0; this.I_mouseY = 0; this.A_callback = new Array(); this.addCallback = function (_name, _callback) { this.A_callback[_name] = _callback; } this.removeCallback = function (_name) { if (undefined != this.A_callback[_name] ) { this.A_callback[_name] = undefined; } } this.callback = function () { for (i in this.A_callback) { if (this.A_callback[i] != undefined && typeof this.A_callback[i] == 'function') { this.A_callback[i](this.I_mouseX, this.I_mouseY); } } } this.mousePostion = function (e) { Mouse.I_mouseX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; Mouse.I_mouseY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; Mouse.callback(); } if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.onmousemove = this.mousePostion; } Mouse = new CMouse();





Aucun commentaire pour le moment.
Aucun trackback.
Pour faire un trackback sur ce billet : http://www.blog.cactuscrew.com/tb.php?id=108&chk=iy8voz