Div apparition fun

Soyez le premier à donner votre avis sur cette source.

Vue 16 133 fois - Téléchargée 1 172 fois

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 / Exemple :


<!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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_Deny
Messages postés
41
Date d'inscription
lundi 21 octobre 2002
Statut
Membre
Dernière intervention
16 février 2009
-
Pas mal...
Ajoute une disparition en cliquant sur le fond d'écran.
Plus facile qu'en cliquant sur le X.

Note : 6
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2 -
Effet super sympa :)
Code à améliorer mais pas mal :)
lassie14
Messages postés
45
Date d'inscription
dimanche 29 mai 2005
Statut
Membre
Dernière intervention
3 mai 2010
-
tres sympa petit script
mais il manque un peu de css pour etre plus jolie
et le clique ailleur pour fermer peut etre sympa aussi
sinon tres bon script
abdoulax
Messages postés
875
Date d'inscription
samedi 17 mai 2003
Statut
Membre
Dernière intervention
22 juin 2012
-
Pour le CSS, c'est à vous de le faire (sur le site pour lequel j'ai réalisé ce script, c'est très jolie :d). En effet je pourrais mettre un evenement lorsque l'on click à l'exterieur du div...

mickaelpfr, je veux bien améliorer le code mais en quoi ?
lassie14
Messages postés
45
Date d'inscription
dimanche 29 mai 2005
Statut
Membre
Dernière intervention
3 mai 2010
-
c'est vrai pour le css
mais pour le clique a l'exterieur je veut bien que tu l'implemente parceque perso j'aimerai bien mais je ne sais pas faire

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.