|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 CURSEUR DYNAMIQUE
 Information sur la source
 Description
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
Pour les "Membres Club", vous pouvez 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
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 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
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|