Accueil > > > DIV APPARITION FUN
DIV APPARITION FUN
Information sur la source
Description
Voici un petit script que j'ai réalisé pour afficher le formulaire d'authentification sur un site qui va bientôt sortir.
Source
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
- <head>
- <meta name="author" content="abdoulax" />
- <style>
- #JsLogin{
- background: #67A8EA;
- position: absolute;
- top: 0;
- left:0;
- border: 2px solid #296CB3;
- overflow: hidden;
- padding: 5px;
- display: none;
- }
- #JsLogin #loginClose{
- text-align: center;
- background: #FFF;
- color: #296CB3;
- font-weight: bold;
- float: right;
- cursor: pointer;
- border: 1px solid #296CB3;
- width: 14px;
- }
- </style>
- </head>
- <body >
- <div onclick='ObjLogin.start(); return false;'>Start</div>
- <div id="JsLogin">
- <div id='loginClose' onclick='ObjLogin.end(); return false;'>X</div>
- <p><input type="text" name="login" id="jform3_login" value=""/></p>
- <p><input type="text" name="login" id="jform3_login" value=""/></p>
- <p><input type="text" name="login" id="jform3_login" value=""/></p>
- </div>
- <script type="text/javascript">
- window.onload = function() {
- if ( obj=document.getElementById("JsLogin") )
- {
- ObjLogin=new anim1("ObjLogin", "JsLogin",400,300);
- //~ document.body.appendChild(obj);
- }
- }
-
- function anim1(_myName, _id, _width, _height) {
- //Variable de la classe
- this.myName =_myName;
- this.id =_id;
- this.xCur =0;
- this.yCur =0;
- this.xEnd =0;
- this.yEnd =0;
- this.wCur =0;
- this.hCur =0;
- this.wEnd =_width;
- this.hEnd =_height;
- this.continu =false;
- this.timer =null;
- this.cmd ="";
-
- //Méthode de la classe
- this.start= function() {
- if (document.all) {
- winX=screen.width;
- winH=screen.height;
- }
- else {
- winX=window.innerWidth;
- winH=window.innerHeight;
- }
- this.xEnd=((winX-this.wEnd)/2);
- this.yEnd=((winH-this.hEnd)/2);
-
- document.getElementById(this.id).style.display="block";
- this.cmd ="";
- this.startLoop();
- };
-
- this.end = function() {
- this.cmd ='document.getElementById(this.id).style.display="none";';
- this.endLoop();
- };
-
- this.startLoop = function() {
- this.continu=false;
- this.calc("wCur+", ( this.wCur < this.wEnd ));
- this.calc("hCur+", ( this.hCur < this.hEnd ));
- this.calc("xCur+", ( this.xCur < this.xEnd ));
- this.calc("yCur+", ( this.yCur < this.yEnd ));
- this.flush("startLoop");
- };
-
- this.endLoop = function () {
- this.continu=false;
- this.calc("wCur-", ( this.wCur > 0 ));
- this.calc("hCur-", ( this.hCur > 0 ));
- this.calc("xCur-", ( this.xCur > 0 ));
- this.calc("yCur-", ( this.yCur > 0 ));
- this.flush("endLoop");
- };
-
- this.flush = function (action) {
- if ( this.continu )
- {
- document.getElementById(this.id).style.left=this.xCur + "px";
- document.getElementById(this.id).style.top=this.yCur + "px";
- document.getElementById(this.id).style.width=this.wCur + "px";
- document.getElementById(this.id).style.height=this.hCur + "px";
- this.timer=setTimeout(this.myName + "." + action + "()",20);
- }
- else
- eval(this.cmd);
- };
-
- this.calc = function (action, cond) {
- if ( cond )
- {
- eval(this.myName + "." + action + "=40");
- this.continu=true;
- }
- };
- }
- </script>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta name="author" content="abdoulax" />
<style>
#JsLogin{
background: #67A8EA;
position: absolute;
top: 0;
left:0;
border: 2px solid #296CB3;
overflow: hidden;
padding: 5px;
display: none;
}
#JsLogin #loginClose{
text-align: center;
background: #FFF;
color: #296CB3;
font-weight: bold;
float: right;
cursor: pointer;
border: 1px solid #296CB3;
width: 14px;
}
</style>
</head>
<body >
<div onclick='ObjLogin.start(); return false;'>Start</div>
<div id="JsLogin">
<div id='loginClose' onclick='ObjLogin.end(); return false;'>X</div>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
<p><input type="text" name="login" id="jform3_login" value=""/></p>
</div>
<script type="text/javascript">
window.onload = function() {
if ( obj=document.getElementById("JsLogin") )
{
ObjLogin=new anim1("ObjLogin", "JsLogin",400,300);
//~ document.body.appendChild(obj);
}
}
function anim1(_myName, _id, _width, _height) {
//Variable de la classe
this.myName =_myName;
this.id =_id;
this.xCur =0;
this.yCur =0;
this.xEnd =0;
this.yEnd =0;
this.wCur =0;
this.hCur =0;
this.wEnd =_width;
this.hEnd =_height;
this.continu =false;
this.timer =null;
this.cmd ="";
//Méthode de la classe
this.start= function() {
if (document.all) {
winX=screen.width;
winH=screen.height;
}
else {
winX=window.innerWidth;
winH=window.innerHeight;
}
this.xEnd=((winX-this.wEnd)/2);
this.yEnd=((winH-this.hEnd)/2);
document.getElementById(this.id).style.display="block";
this.cmd ="";
this.startLoop();
};
this.end = function() {
this.cmd ='document.getElementById(this.id).style.display="none";';
this.endLoop();
};
this.startLoop = function() {
this.continu=false;
this.calc("wCur+", ( this.wCur < this.wEnd ));
this.calc("hCur+", ( this.hCur < this.hEnd ));
this.calc("xCur+", ( this.xCur < this.xEnd ));
this.calc("yCur+", ( this.yCur < this.yEnd ));
this.flush("startLoop");
};
this.endLoop = function () {
this.continu=false;
this.calc("wCur-", ( this.wCur > 0 ));
this.calc("hCur-", ( this.hCur > 0 ));
this.calc("xCur-", ( this.xCur > 0 ));
this.calc("yCur-", ( this.yCur > 0 ));
this.flush("endLoop");
};
this.flush = function (action) {
if ( this.continu )
{
document.getElementById(this.id).style.left=this.xCur + "px";
document.getElementById(this.id).style.top=this.yCur + "px";
document.getElementById(this.id).style.width=this.wCur + "px";
document.getElementById(this.id).style.height=this.hCur + "px";
this.timer=setTimeout(this.myName + "." + action + "()",20);
}
else
eval(this.cmd);
};
this.calc = function (action, cond) {
if ( cond )
{
eval(this.myName + "." + action + "=40");
this.continu=true;
}
};
}
</script>
</body>
</html>
Conclusion
Have fun
Historique
- 28 janvier 2008 17:06:12 :
- Une version v2 dans le zip avec le clique à l'exterieur du div qui ferme la fenêtre. Mais c'est un peut du bricolage, donc j'ai laissé ma première source dans la zone source...
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Javascript - apparition du script lorsque l'internaute quitte le site - [ par Michette ]
Hello,J'ai trouvé modifié un script de manière à adresser une formule de politesseà l'intenaute selon l'horaire de la journée (bonsoir, bonne soirée,.
Apparition d'un message comme Messenger de hotmail (en javascript) ? [ par dragontn ]
Bonjour à tous et à toutes,J'aimerais savoir si quelqu'un a en stock le code (en JavaScript) pour faire apparaitre un message à la manière du messenge
chargement dans cadre différent à la fin d'une animation [ par zygene ]
bonjour,je souahite charger un menu dans un cadre de gauche, une fois que l'animation flash du cadre principal est terminée...euh, comment faire? (sac
du flash dans un fichier .JS [ par bernard09 ]
Salut.Je cherche à inserer les lignes d'appel d'une animation flash dans un fichier .JS pour pouvoir ensuite lancer l'animation sur plusieurs page et
animation flash [ par nico606 ]
Slt g un problème g une animation flash sur mon mon site mais je n'ai pas le logiciel flash.Alors si vous l'avez je vous envoie mon fichier en fete je
pbm avec window.open [ par matoo ]
bonjour,j'ai une animation flash contenant des boutons, appelant des popup.swf à l'aide d'un : getURL("javascript:popup('anim1.swf','popup',',left
Une [image] fixe qui suis la souris [ par ptitsky ]
Bonjour à tous ,Mon pb :Je voudrai faire qu'une image suivent le mouvement de la souris, mais, que un bout de cette meme image reste au meme endroit.E
lien html / flash ? [ par pistoff ]
Voila mon problème:j'ai une animation flash qui commence dans une premiere page html... et j'aimerais qu'en passant sur une deuxieme page html la meme
Passer des variables dans <param> ? [ par WhiteMagus ]
Salut.Je fais un site en Flash, mais j'aimerai que l'animation se repoitionne avec une animation au centre de la page si celle-ci est redimensionnée.
Class Defilement auto d'images avec animation [ par MeTh ]
Je suis sur d'etre pret du but et je suis également convaincu que ce script peut servir à bcp de personne. Ceci ma première tentative
|
Derniers Blogs
TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|