CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 15 04:55:15

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

CURSEUR DYNAMIQUE

Information sur la source

Note :

10,00 / 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 !

blank.cur766 octets
cursor.html 3 580 octets

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

RAINBOW CURSOR

CURSEUR QUI POINTE LA SOURIS

Toutes les sources de wackybacky

Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

RAINBOW CURSOR par wackybacky

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

CURSEUR QUI POINTE LA SOURIS par wackybacky

CURSEUR INVISIBLE par abdelaziz_info

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 à 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 ] <li class="style13"><a style="cursor:hand" onclick="changetexte(1)" this.style.cursor = 'hand' >La toile du Quebec</a></li>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

Derniers Blogs

[RIA SERVICES] MAITRE - DéTAIL ET DOMAINDATASOURCE par Audrey

CSDL FUNCTION par Matthieu MEZIL

LINQ TO ENTITIES par Matthieu MEZIL

FAIRE APPARAITRE L'ONGLET 'DéVELOPPEUR' DANS OFFICE 2010 par neodante

[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1 par pierre

Forum

RE : CREATION D'UN MENU ELLIPSE par hachim88

FICHIER JOINT EN FLASH par coulemelle

PROBLèME IDENTIFICATION POUR ACCéDER à UNE PAGE par kinvara

SLT par kurapikt

HELP! FORMULAIRE - STYLE CSS/PHP & SESSION par LuxeurDelphii

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Site internet php
Budget : 350€
site formation reiki distance
Budget : 900€
Banniere Flash Drupal
Budget : 150€

Logiciels

Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods
Konvertor (4.00)
KONVERTOR (4.00)

Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format...

Cliquez pour télécharger Konvertor