begin process at 2012 05 29 03:47:17
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

événement permanent


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

événement permanent

mercredi 20 juin 2007 à 15:49:23 | événement permanent

arnaultp

Bonjour à tous!
J'ai repris un script ici même qui représente une sorte de manège avec des icones. Ce script m'intéressant bien, j'ai voulu l'améliorer pour qu'il tourne sur un des côtés selon la position de la souris (et cela à tout moment).
Ainsi le problème que je rencontre est au niveau de l'événement. En effet, avec un événement, qui est ponctuel, je ne peut effectuer qu'une action ponctuelle...

voici mon script (pour l'instant déclenché par le chargement de la page)

<!--
//images du manège
var pict=["google.png",
    "ejs.gif",
    "Agenda2.PNG",
    "barre.jpg",
    "BdEtude2.PNG",
    "Frais2.PNG"];
//lien des vignettes dans l'ordre des images ci dessus
var lien=["http://google.fr",
    "http://editeurjavascriptfr.com",
    "http://google.fr",
    "http://google.fr",
    "http://google.fr",
    "http://google.fr"];

var angle = 0, ll, hh, bcl, vit = 0.05;
//taille des vignettes
var taille = 40;
//largeur de tout le manège
var largeur = 25*pict.length;
//hauteur de tout le manège
var hauteur = 40;
//position horizontale de la souris
var largeurSouris = 0;
//largeur de l'écran
var largeurEcran = 0;


//fonction qui récupère la largeur de l'écran et l'affecte à une varaible globale
function recupererLargeurEcran()
{
    if (document.body)
    {
        largeurEcran = (document.body.clientWidth);
    }
    else
    {
        largeurEcran = (window.innerWidth);
    }
}

//fonction qui récupère la position horizontale de la souris et l'affecte à une varaible globale
function recupererPositionSouris(e) // On ne s'intéresse qu'à la position horizontale
{
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        largeurSouris = e.pageX;
    }
    else if (e.clientX || e.clientY)
    {
        largeurSouris = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    }
}

//fonction de démarrage
function window_onload(e)
{
    for( i=1 ; i<pict.length+1 ; i++ )
    {
        document.body.innerHTML += "<img id=i" + i + " src=" + pict[i-1] + " onmouseover=\"vit=0\" onmouseout=\"vit=0.05\" onclick=\"location.href=\'" + lien[i-1] + "\'\" class=imag>"
    }
   
    return faireTourner(e);
}

// fonction qui fait tourner la chaine selon la position de la souris sur la page
function faireTourner(e)
{
    recupererLargeurEcran(); // j'appelle ma fonction pour qu'elle récupère la taille de l'écran et l'enregistre dans ma variable globale associée
    
    recupererPositionSouris(e);// j'appelle ma fonction pour qu'elle récupère la position horizontale de la souris et l'enregistre dans ma variable globale associée
   
    while ( largeurSouris < largeurEcran/2 )// si la souris est à gauche, la chaine bouge à gauche
    {
        moveLeft();
        recupererLargeurEcran();
    }
   
    while (  largeurSouris >= largeurEcran/2 )// si la souris est à droite, la chaine bouge à droite
    {
        moveRight();
        recupererLargeurEcran();
    }
}

// permet de faire tourner la chaine vers la droite
function moveRight()
{
    ll = document.body.clientWidth/2;
    hh = document.body.clientHeight/2;
    angle = angle-vit;
   
    for( i=1 ; i<pict.length+1 ; i++ )
    {
        document.getElementById("i"+i).style.left = ll + largeur*(Math.cos(angle + i*Math.PI/(pict.length/2)));
        document.getElementById("i"+i).style.top = hh + hauteur*(Math.sin(angle + i*Math.PI/(pict.length/2)))+document.getElementById("i"+i).width/2;
        agl = angle + i*Math.PI/(pict.length/2);
        document.getElementById("i"+i).width = 20*(Math.sin(agl)) + taille;
        document.getElementById("i"+i).style.zIndex = 50*(Math.sin(agl))+100;
        document.getElementById("i"+i).style.opacity = (Math.sin(agl)+1)*0.50;
        document.getElementById("i"+i).style.filter = "alpha(opacity=" + (Math.sin(agl)+1)*50 + ")";
    }
    //setTimeout("faireTourner()",50);
    faireTourner();
}

// permet de faire tourner la chaine vers la gauche
function moveLeft()
{
    ll = document.body.clientWidth/2;
    hh = document.body.clientHeight/2;
    angle = angle-vit;
   
    for( i=1 ; i<pict.length+1 ; i++ )
    {
        document.getElementById("i"+i).style.left = ll + largeur*(Math.sin(angle + i*Math.PI/(pict.length/2)));
        document.getElementById("i"+i).style.top = hh + hauteur*(Math.cos(angle + i*Math.PI/(pict.length/2))) + document.getElementById("i"+i).width/2;
        agl = angle + i*Math.PI/(pict.length/2);
        document.getElementById("i"+i).width = 20*(Math.cos(agl)) + taille;
        document.getElementById("i"+i).style.zIndex = 50*(Math.sin(agl))+100;
        document.getElementById("i"+i).style.opacity = (Math.sin(agl)+1)*0.50;
        document.getElementById("i"+i).style.filter = "alpha(opacity=" + (Math.cos(agl)+1)*50 + ")";
    }
   
    //alert("gauche : on refait un tour");
    //setTimeout("faireTourner()",50);
    faireTourner();
}

-->

Merci d'avance pour votre aide
vendredi 22 juin 2007 à 10:31:19 | Re : événement permanent

zuff

Réponse acceptée !
suite à ta demande j'ai fait un nouveau menu qui tourne plus ou moins vite suivant où se trouve la souris dans la page : http://www.javascriptfr.com/code.aspx?ID=43216


Cette discussion est classée dans : style, math, document, angle, getelementbyid


Répondre à ce message

Sujets en rapport avec ce message

acces bouton [ par ben1 ] je suohaiterai vérifier que mes boutons sont bien actifs par .checked mais apparament ce ne fonctionne pas vraiment ... pourriez-vous m'aider?voici le javascript bouton checked function [ par ben1 ] je suohaiterai vérifier que mes boutons sont bien actifs par .checked mais apparament ce ne fonctionne pas vraiment ... pourriez-vous m'aider?> > voic Probléme entre deux scripts [ par massacr ] Bonjour, Je veux mettre deux scripts dans ma page.L'un est un effet de texte déroulant, l'autre est un effet d'ouverture de message au chargement de l document.getElementById('body').style.overflow='hidden' [ par Grand Mamamouchi ] Bonsoir !peux-tu m'expliquer pourquoi l'overflow n'est pas masque (jedeveloppe sur Mozilla 1.6) ?document.getElementById('body').style.overflow='hidde controle de mouvement d'un calque avec bouton [ par kartoon ] Bonjour,Je souhaiterai connaître l'astuce pour pouvoir controler le déplacement d'un calque :J'ai un bouton "deplacer" qui fonctionne en entrant une d <DIV> Explorer 5 Macintosh [ par jpastier ] Bonjour, J'ai réalisé un script qui me permet d'afficher les détails d'un lien. Tout fonctionne correctement sur les navigateurs Firefox, Safari, ma problème de div [ par algori ] Bonjour,Voilà, mon problème est qu'il se génère une erreur dans le script suivant quand j'essaie de fermer ma checkbox. Je suppose que l'erreur est si block/none de div [ par kishkaya ] voila j'ai des contenu et j'essaye de creer une fonction pour cacher ou afficher ces div en m'inspirant d'une fonction trouver sur ce site . Moi j'ai objet qui suit le souris [ par CCJ ] bonjour g trouver ce code ici : var x = 0; var y = 0; posX = 0; posY = 0; if (document.getElementById)    {    if(navigator.appName.substring(0,3). Marche pas sous IE [ par taxidogkiller ] Bonjour, j'ai télécharger un script de galerie d'image et en voulant le bidouiller je suis tomber sur des fonction javascript qui ne marche que sous m


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,560 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales