Comment faire un curseur avec une roue multicolore en javascript ?

 

par meltech1 |

     
Comment faire un curseur avec une roue multicolore en javascript ?

Une roue, c'est comme à la fête foraine : c'est une rotation d'un ensemble de personnes ou d'individus qui montent dans un engin rotatif qui tourne à une vitesse où il y a des cris pour que les gens redescendent. Ce que je vous propose de programmer ici c'est une roue heureusement sans risque puisqu'elle va tourner autour de votre curseur. Voici comment faire.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec "bloc notes" pour en faire apparaître le code source. Maintenant que vous avez le programme veuillez chercher la balise <body> pour y insérer le script suivant.

2.

Dans la balise <body> insérez le script suivant :
<script language="JavaScript">
CoLoUrS=new Array('00FF00','FF00FF','FF0000','CCFFCC'); // ou autres couleurs
var step=0.3,a_StEp=0.05,RunTime=0,currStep=0,Xpos=0,Ypos=0,cntr=70,count_a=0;
var count=0,move=1,Ay=0,Ax=0,dots=16;var x;brwsr=(document.layers)?1:0;
if (brwsr){
for (i=0; i < dots; i++){
document.write('<LAYER NAME="a'+i+'" LEFT=0 TOP=0 BGCOLOR=#3366ff CLIP="0,0,3,3"></LAYER>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = nsMouse
}
else{
document.write('<div id="ys" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < dots; i++){
document.write('<div id="ieDivs" style="position:absolute;top:0px;left:0px;width:3px;height:3px;background:#3366ff;font-size:3px"></div>');
}
document.write('</div></div>');
function ieMouse(){
Ypos=event.y;
Xpos=event.x;
}
window.document.onmousemove = ieMouse
}
function MouseFollow(){
ay = Math.round(Ay+=(Ypos- Ay)* 4/40);
ax = Math.round(Ax+=(Xpos- Ax)* 4/40);
setTimeout('MouseFollow()',10);
}
function colourStep(){
count+=move;
if (count >= dots) {count=0;count_a+=move}
if (count_a == CoLoUrS.length) count_a=0;
if (brwsr) document.layers["a"+count].bgColor=CoLoUrS[count_a];
else ieDivs[count].style.background=CoLoUrS[count_a];
setTimeout('colourStep()',100)
}
function TwistnSpin(){
if (!brwsr) ys.style.top=document.body.scrollTop;
for (i=0; i < dots; i++)
{
var allLayers=(document.layers)?document.layers["a"+i]:ieDivs[i].style;
allLayers.top=ay+cntr*Math.cos((currStep+i*4)/10.2)*Math.sin(currStep/20);
allLayers.left=ax+cntr*Math.sin((currStep+i*4)/10.2)*Math.cos(1+currStep/20);
}
currStep-=step;
setTimeout("TwistnSpin()",10);
}
function CombineNstart(){
MouseFollow();TwistnSpin();colourStep();
}
window.onload=CombineNstart;
</script>.

3.

Pour terminer enregistrez le tout avec "bloc notes" puis ouvrez avec IE. Maintenant il y a un curseur avec une roue multicolore qui tourne autour. C'est comme à la fête foraine mais en moins dangereux. Voilà vous avez programmé le curseur "roue qui tourne" en javascript.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on