begin process at 2010 03 15 04:55:15
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > CURSEUR DYNAMIQUE

CURSEUR DYNAMIQUE


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :souris, curseur, dynamique, rotation, direction Niveau :Initié Date de création :10/06/2007 Date de mise à jour :22/06/2007 18:19:09 Vu / téléchargé :22 166 / 699

Auteur : wackybacky

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Compatible IE / FF, ce script affiche un curseur (interne au code et modifiable à souhait) qui suit les moindre mouvements du curseur Windows mais, plus intéressant, tourne en fonction de la direction de votre souris. Plusieurs paramètres sont disponibles et le code est assez concis mais est relativement lourd en mémoire car travaille point par point et utilise la rotation (Affiche un meilleurs rendu sur IE que sur FF).

12/06/2007 => Mémoire directionnelle adaptée à la vitesse de la souris (atténuation du tremblement).

15/06/2007 => Listing des pixels à l'initialisation, plus de getElementById(), code plus léger et gain de rapidité.

17/06/2007 => Recentrage du point de rotation (head), fonction ang() corrigée, distance Tête_curseur/Curseur_Windows paramétrable.

17/06/2007 => Transparence des pixels, léger remodelage du script.

22/06/2007 => Tentative de transparence dynamique abandonnée car augmente la latence. Fonction d'arrêt du curseur.

Source

  • <html>
  • <head>
  • <title>Curseur Dynamique</title>
  • </head>
  • <body bgcolor="silver" style="cursor:url(blank.cur),default">
  • <script type="text/javascript">
  • //--------------------------------------------------------//
  • // CURSEUR DYNAMIQUE par WackyBacky
  • //--------------------------------------------------------//
  • //---[ Déclaration des Paramètres ]-----------------------//
  • var wdt=3; // Taille d'un pixel (px)
  • var spc=2; // Espacement pixels (px)
  • var out=1; // Distance Tête/Cur (px)
  • var opc=30; // Opacité du curseur (%)
  • var col=["black","green"]; // Couleurs du curseur
  • var head=[4,0],tail=[4,8]; // Tête/Queue de flèche
  • //---[ Curseur (Bitmap) ]---------------------------------//
  • var cur = [[0,0,0,0,1,0,0,0,0],
  • [0,0,0,1,2,1,0,0,0],
  • [0,0,1,2,2,2,1,0,0],
  • [0,1,2,2,2,2,2,1,0],
  • [1,2,2,2,2,2,2,2,1],
  • [1,2,2,2,2,2,2,2,1],
  • [1,1,1,2,2,2,1,1,1],
  • [0,0,1,2,2,2,1,0,0],
  • [0,0,1,2,2,2,1,0,0],
  • [0,0,1,2,2,2,1,0,0],
  • [0,0,1,1,1,1,1,0,0]];
  • //---[ Calcul de Distance et d'Angle ]--------------------//
  • function dst(x,y){
  • return Math.sqrt(x*x+y*y);};
  • function ang(x,y){
  • var z=(x<0)?z=Math.PI:0;
  • if(x==0)x=1/Number.MAX_VALUE;
  • return Math.atan(y/x)+z;};
  • //---[ Initialisation ]-----------------------------------//
  • var pxl=new Array();
  • function init_cur(x,y){
  • var dX=head[0]-tail[0],dY=head[1]-tail[1];
  • head[0]+=out*wdt*Math.cos(ang(dX,dY))/spc;
  • head[1]+=out*wdt*Math.sin(ang(dX,dY))/spc;
  • Z=ang(dX,-dY);for(y in cur){for(x in cur[y]){
  • if(cur[y][x]>0)pxl.push(create_pxl(x,y));};};
  • return setInterval("move_cur()",15);};
  • //---[ Création des Pixels ]------------------------------//
  • function create_pxl(x,y){
  • var div=document.createElement("div");
  • with(div.style){
  • background=col[cur[y][x]-1];
  • height=wdt;width=wdt;
  • position="absolute";
  • overflow="hidden";
  • if(app){opacity=opc/100;}else{
  • filter="alpha(opacity="+opc+")";};};
  • div.d=dst(x-head[0],y-head[1])*spc;
  • div.a=ang(x-head[0],y-head[1])+Z;
  • document.body.appendChild(div);
  • return div;};
  • //---[ Déplacement du Curseur ]---------------------------//
  • function move_cur(n){for(n in pxl){
  • var posX=X+pxl[n].d*Math.cos(Z+pxl[n].a);
  • var posY=Y+pxl[n].d*Math.sin(Z+pxl[n].a);
  • pxl[n].style.left=Math.round(posX-wdt/2);
  • pxl[n].style.top=Math.round(posY-wdt/2);};};
  • //---[ Position de la Souris ]----------------------------//
  • var memX=Array(20).join(",0").split(",");
  • var memY=Array(20).join(",0").split(",");
  • var app=(navigator.appName=="Netscape");
  • if(app)document.captureEvents(Event.MOUSEMOVE);
  • var X=0,Y=0,Z=0;document.onmousemove=function(e){
  • X=(app)?e.pageX:event.x+document.body.scrollLeft;
  • Y=(app)?e.pageY:event.y+document.body.scrollTop;
  • memX.shift();memX.push(X);memY.shift();memY.push(Y);
  • var speed=dst(X-memX[0],Y-memY[0])/20;
  • speed=(speed>18)?18:Math.round(speed);
  • Z=ang(X-memX[speed],Y-memY[speed]);};
  • //---[ Execution du Script ]------------------------------//
  • document.onload=init_cur();
  • //---[ Arrêt du Script ]----------------------------------//
  • function stop_cur(){
  • clearInterval(document.onload);
  • document.body.style.cursor="default";};
  • </script>
  • <div align="center" style="width:100%;height:100%">
  • <input type="button" value="Stop" onclick="stop_cur()"/>
  • <br>2007 - WackyBacky - pour www.JavascriptFR.com</div>
  • </body>
  • </html>
<html>
<head>
<title>Curseur Dynamique</title>
</head>
<body bgcolor="silver" style="cursor:url(blank.cur),default">

<script type="text/javascript">
//--------------------------------------------------------//
//            CURSEUR DYNAMIQUE par WackyBacky
//--------------------------------------------------------//
//---[ Déclaration des Paramètres ]-----------------------//
var wdt=3;                       // Taille d'un pixel (px)
var spc=2;                       // Espacement pixels (px)
var out=1;                       // Distance Tête/Cur (px)
var opc=30;                      // Opacité du curseur (%)
var col=["black","green"];       // Couleurs du curseur
var head=[4,0],tail=[4,8];       // Tête/Queue de flèche

//---[ Curseur (Bitmap) ]---------------------------------//
var cur = [[0,0,0,0,1,0,0,0,0],
           [0,0,0,1,2,1,0,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,1,2,2,2,2,2,1,0],
           [1,2,2,2,2,2,2,2,1],
           [1,2,2,2,2,2,2,2,1],
           [1,1,1,2,2,2,1,1,1],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,2,2,2,1,0,0],
           [0,0,1,1,1,1,1,0,0]];

//---[ Calcul de Distance et d'Angle ]--------------------//
function dst(x,y){
  return Math.sqrt(x*x+y*y);};

function ang(x,y){
  var z=(x<0)?z=Math.PI:0;
  if(x==0)x=1/Number.MAX_VALUE;
  return Math.atan(y/x)+z;};

//---[ Initialisation ]-----------------------------------//
var pxl=new Array();
function init_cur(x,y){
  var dX=head[0]-tail[0],dY=head[1]-tail[1];
  head[0]+=out*wdt*Math.cos(ang(dX,dY))/spc;
  head[1]+=out*wdt*Math.sin(ang(dX,dY))/spc;
  Z=ang(dX,-dY);for(y in cur){for(x in cur[y]){
  if(cur[y][x]>0)pxl.push(create_pxl(x,y));};};
  return setInterval("move_cur()",15);};

//---[ Création des Pixels ]------------------------------//
function create_pxl(x,y){
  var div=document.createElement("div");
  with(div.style){
    background=col[cur[y][x]-1];
    height=wdt;width=wdt;
    position="absolute";
    overflow="hidden";
    if(app){opacity=opc/100;}else{
    filter="alpha(opacity="+opc+")";};};
  div.d=dst(x-head[0],y-head[1])*spc;
  div.a=ang(x-head[0],y-head[1])+Z;
  document.body.appendChild(div);
  return div;};

//---[ Déplacement du Curseur ]---------------------------//
function move_cur(n){for(n in pxl){
  var posX=X+pxl[n].d*Math.cos(Z+pxl[n].a);
  var posY=Y+pxl[n].d*Math.sin(Z+pxl[n].a);
  pxl[n].style.left=Math.round(posX-wdt/2);
  pxl[n].style.top=Math.round(posY-wdt/2);};};

//---[ Position de la Souris ]----------------------------//
var memX=Array(20).join(",0").split(",");
var memY=Array(20).join(",0").split(",");
var app=(navigator.appName=="Netscape");
if(app)document.captureEvents(Event.MOUSEMOVE);
var X=0,Y=0,Z=0;document.onmousemove=function(e){
  X=(app)?e.pageX:event.x+document.body.scrollLeft;
  Y=(app)?e.pageY:event.y+document.body.scrollTop;
  memX.shift();memX.push(X);memY.shift();memY.push(Y);
  var speed=dst(X-memX[0],Y-memY[0])/20;
  speed=(speed>18)?18:Math.round(speed);
  Z=ang(X-memX[speed],Y-memY[speed]);};

//---[ Execution du Script ]------------------------------//
document.onload=init_cur();

//---[ Arrêt du Script ]----------------------------------//
function stop_cur(){
  clearInterval(document.onload);
  document.body.style.cursor="default";};
</script>

<div align="center" style="width:100%;height:100%">
<input type="button" value="Stop" onclick="stop_cur()"/>
<br>2007 - WackyBacky - pour www.JavascriptFR.com</div>

</body>
</html>

 Conclusion

Un paramètre de latence du curseur est à venir (effet de retard)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 juin 2007 22:30:46 :
12/06/2007 => Mis à Jour : Mémoire directionnelle est désormais adaptée à la vitesse de la souris, Cela a pour effet de stabiliser le curseur lors de faibles déplacements (atténuation du tremblement)
12 juin 2007 22:38:43 :
Mise à jour description
12 juin 2007 22:56:39 :
Mise a Jour Zip/Img
15 juin 2007 01:32:13 :
15/06/2007 => Mis à Jour : Listing des pixels à traiter à l'initialisation (plus de double boucle pendant le mouvement du curseur), plus aucun getElementById(x,y), code plus léger et gain de rapidité pour FF désormais quasi-équivalent à IE! Que demande le peuple?
17 juin 2007 14:11:31 :
17/06/2007 => Mis à Jour : Recentrage du point de rotation (head) au centre du pixel et non à son coin sup/gauche. Fonction ang() corrigée afin que Math.atan(y/0) ne renvoie pas d'erreur. Distance Tête_curseur/Curseur_Windows paramétrable. distance/angle des pixels calculés lors de l'initialisation. Meilleurs rendu graphique et meilleures précision, cependant, initialisation un peu plus longue. Vive la république et vive la France.
17 juin 2007 14:20:41 :
Mise à jour description
17 juin 2007 22:04:57 :
17/06/2007 => Mis à Jour : Curseur Windows remplacé par "blank.cur" ne laissant apparaitre QUE le curseur dynamique. Nouveau paramètre traitant la transparence des pixels (très prochainement dynamique). Très léger remodelage du script. Plus de raccourci pour Mémoire directionnelle (idéal=20).
22 juin 2007 18:19:09 :
22/06/2007 => Mis à Jour : Tentative de transparence dynamique abandonnée car augmente la latence. Ajout fonction d'arrêt du curseur.

 Sources du même auteur

Source avec Zip Source avec une capture RAINBOW CURSOR
Source avec Zip Source avec une capture CURSEUR QUI POINTE LA SOURIS

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture RAINBOW CURSOR par wackybacky
Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info
Source avec Zip Source avec une capture CURSEUR QUI POINTE LA SOURIS par wackybacky
Source avec Zip CURSEUR INVISIBLE par abdelaziz_info
Source avec Zip CURSEUR ENTOURÉ DE FLEURS par abdelaziz_info

Commentaires et avis

Commentaire de LeFauve42 le 18/06/2007 11:22:34

Ca a l'air sympa, mais ce serait parfait si tu fournissais une URL pour voir ce que ca donne.
(Si elle y est deja, mets la plus en valeur car je ne l'ai pas trouvee :o) )

Commentaire de wackybacky le 19/06/2007 20:47:14

Pour tout dire, je ne possède pas encore d'hébergement. C'est cependant une très bonne idée et si quelqu'un à souhaité l'installer sur une de ses pages, je vous invite à laisser l'url de celle là afin que tout le monde puisse avoir un aperçu (ça vous donnera l'occasion de vous faire connaitre :p) ++

Commentaire de MATHIS49 le 03/07/2007 19:39:55

sympa mais pas trés pratique, ce qui serais mieux c'est de pouvoir donner un itineraire pré définis à ce curseur afin de faire des démos par exemple

Commentaire de wackybackyprod le 04/07/2007 01:33:43

Mais là ce n'est pas le but. En revanche, il est toujours possible de créer un tableau de points à suivre (dans un intervalle de temps régulier) et de bricoler une fonction remplaçant celle de la capture des coordonnées du curseur.

Commentaire de wackybacky le 07/07/2007 20:26:21

Bon c'est pas une si mauvaise idée après tout, j'ai cherché un peu ce que ça pouvait donner, j'ai un peu bloquer pour réaliser une pause (ex:sleep(10ms)) in-line pour créer un genre de scène mais c'est impossible en javascript. Je suis donc passé par deux fonction asynchrones impliquant donc 2 timers (move_cursor() et auto_crsor()) le script est opérationnel et en cours de finition. Il devrait arriver d'ici une petite semaine (c'est qu'il y en a qui ont un métier dans la vie :p)

Commentaire de tymex le 29/12/2007 20:47:31

Oui, mais peut-on mettre un curseur personalisé ?
Car je ne trouve aucun scrip permettant la rotation de son propre curseur.

Merci.

Commentaire de wackybacky le 06/01/2008 01:05:03

J'ai créé ce script sur la base d'un curseur interne (variable cur) qui est en fait un tableau bitmap (pixel par pixel): Comme tu peux le voir, ce dernier est constitué de la manière suivante: (Xn étant le nième pixel)
[[X1,X2,X3],  //=> Première ligne de pixels
[X4,X5,X6],  //=> Deuxième ligne de pixels
[X7,X8,X9]]  //=> Troisième ligne de pixels
Les valeurs contenues dans le tableau font référence à une couleur définie dans la variable col à savoir dans cet exemple, 1=black, 2=green (mais peut prendre une valeur de type #RVB). La valeur 0 correspond à l'absence de pixel. On peut donc lire dans un tableu remplis de telle sorte:
[[0,1,0],     #
[1,0,1], => # # => Un losange noir
[0,1,0]]     #
L'avantage étant que ce tableau est redimentionnable à souhait et que tu peux ajouter autant de couleurs que tu le souhaite dans la variable col (tant que les pixels font biens référence à la couleur désirée).
C'est un peu dur à expliquer mais tu peux y voir comme dans la matrice :) avec un peu d'entraînement. En fait j'avais attaqué la fonction edit de ce curseur (pour le modifier point par point) mais le temps me manque cruellement.
J'espère que celà aura pu t'aider un petit peu même si c'est confus.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Menu dynamique [ par bside8 ] Bonjour,je souhaite réaliser un menu somme toute classique consistant à faire apparaître un menu détaillé lors du passage de la souris sur l'un des it changer l'apparence du curseur souris [ par Ma2004 ] Salut &#224; tous !Savez vous comment changer l'apparence du curseur de la souris lorsqu'elle passe sur une image, sur un lien ou autre ?Je voudrais q curseur de souris ( mouse hand) commment faire sous firefox [ par Jolan123 ] &lt;li class="style13"&gt;&lt;a style="cursor:hand" onclick="changetexte(1)" this.style.cursor = 'hand' &gt;La toile du Quebec&lt;/a&gt;&lt;/li&gt;ca Est il possible de changer le curseur de la souris [ par pedro ] Slt,J'aimerais savoir si il est possible de changer le curseur de la souris sur une page web.Merci@+Pedro curseur de souris, mettre un gif [ par RastaToon ] Bonjour,Je souhaiterais utiliser le javascript ci-dessous mais en utilisant mon propre gif animé. Est-ce possible ?Merci à tousdocument.getElementsByT remplacer le curseur de la souris sur mon site par un ptit dessin animé(.gif) [ par nico454545 ] Bonjour,je ne sais pas si je suis au bon endroit pour parler de ça, alors voilà tout de meme, j'aimerais  remplacer le curseur de la souris sur mon si Javascript - Menu dynamique en fonction de la position du curseur sur celui-ci [ par sebastiengoret ] Bonjour à tous, Je cherche un moyen de créer un menu dynamique verticalement. Ce menu contient une série d'image provenant d'une base de données et pe Curseur de la souris sur un bouton. [ par overstorex ] Bonsoir, j'aurai voulu savoir si il est possible si le curseur de la souris ce trouve sur le bouton celui-ci change de couleur ? javascript, Appeler une fonction avec un nom de fonction dynamique, equivalent à getFunctionByName [résolu] [ par sdess ] Bonjour,J'ai beaucoup cherché pour trouver cette solution, que j'ai trouvé en tatonant, alors je la documente ici :J'aivais besoin de transmettre une Position du curseur dans une div [ par Dj Nam ] Bonjour tout le monde,Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car j


Nos sponsors


Appels d'offres

Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales