Curseur dynamique
Soyez le premier à donner votre avis sur cette source.
Vue 27 903 fois - Téléchargée 900 fois
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.
Un paramètre de latence du curseur est à venir (effet de retard)
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 / Exemple :
<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)
Codes Sources
A voir également
- Curseur rainbow
- Curseur de souris rainbow - Meilleures réponses
- Javascript : Rainbow cursor - CodeS SourceS - Guide
- Curseur sql - Conseils pratiques - SQL
- Curseur javascript - Guide
- Curseur de souris animé ✓ - Forum - Visual Basic 6
- Curseur en arabe - Forum - Java
[[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.
Car je ne trouve aucun scrip permettant la rotation de son propre curseur.
Merci.
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.