Curseur dynamique

Télécharger le projet
Commenter

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 / 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)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (wackybacky)