begin process at 2010 02 10 12:27:24
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > IMAGES ÉCLATÉES QUI SE REGROUPENT

IMAGES ÉCLATÉES QUI SE REGROUPENT


 Information sur la source

Note :
10 / 10 - par 3 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :12/11/2003 Vu :7 694
Auteur : francktfr

Ecrire un message privé
Site perso
Commentaire sur cette source (1)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Amusez vous bien :o)

Source

  • <HTML>
  • <HEAD>
  • <TITLE></TITLE>
  • <SCRIPT>
  • // 12-11-2003 - francktfr@systeme-d.net
  • // écrit pour http://www.systeme-d.net
  • var imgs = new Array()
  • var ImagesDone = 0
  • var DivX = 6 // Nombre de divisions en longueur
  • var DivY = 2 // Nombre de divisions en hauteur
  • var MoveSteps = 150 // Nombre d'étapes pour le déplacement
  • var Interval = 2000 // Temps entre deux images (ms)
  • AddImage("http://winomail.com/images/ban1.gif")
  • AddImage("http://www.milimel.com/site/bannieres/ban_2.gif")
  • function AddImage(Source){
  • var img = new Image()
  • img.src = Source
  • imgs.push(img)
  • }
  • function Separate(Index){
  • var h = imgs[Index].height / DivY
  • var w = imgs[Index].width / DivX
  • var MinX = -w*2
  • var MaxX = document.body.offsetWidth + 2*w
  • var MinY = -h*2
  • var MaxY = document.body.offsetHeight + 2*h
  • Dones = new Array()
  • for (y = 0; y < DivY; y++){
  • for (x = 0; x < DivX; x++){
  • var i = 0
  • var j = 0
  • var doit = true
  • var small = new Image()
  • small.src = imgs[Index].src
  • small.id = "SmallImg"
  • while (doit){
  • i = ((MaxX - MinX) * Math.random() + MinX)
  • j = ((MaxY - MinY) * Math.random() + MinY)
  • if (((i+w)<0 || i>document.body.offsetWidth) || ( (j+h)<0 || j>document.body.offsetHeight)) {doit=false}
  • }
  • small.style.cssText = "position: absolute; top: "+(j + (((DivY-y)*h)- small.height - Container.offsetTop))+";left:"+(i + (((DivX-x)*w)- small.width - Container.offsetLeft))+"; clip: rect(" + (y*h) + ", " + ((x+1)*w) + ", " + ((y+1)*h) + ", " + (x*w) + ")"
  • Container.insertAdjacentElement("afterBegin", small)
  • }
  • }
  • ImagesDone = 0
  • //WaitImages(Index)
  • for (i=0; i<SmallImg.length; i++){setTimeout("Regroup("+Index+","+i+",1)",50)}
  • }
  • function Clear(Index){
  • if (typeof(BigImg) != "undefined"){Container.removeChild(BigImg)}
  • SmallImg[0].style.zIndex = 10
  • SmallImg[0].style.cssText = ""
  • SmallImg[0].id = "BigImg"
  • var nb = SmallImg.length
  • for (i=0; i<nb; i++){if (typeof(SmallImg[0]) != "undefined"){Container.removeChild(SmallImg[0])}}
  • BigImg.style.zIndex = -1
  • Index >= (imgs.length-1) ? Index=0 : Index ++
  • setTimeout("Separate("+Index+")",Interval)
  • }
  • function Regroup(id, nb, Step){
  • var img = SmallImg[nb]
  • var sx = Math.round(img.offsetLeft/(MoveSteps-Step))
  • var sy = Math.round(img.offsetTop/(MoveSteps-Step))
  • if (Step >= MoveSteps)
  • {
  • img.left = 0
  • img.top = 0
  • ImagesDone++
  • if (ImagesDone == (DivX*DivY)){setTimeout("Clear("+id+")",10)}
  • return(0)
  • }
  • else
  • {
  • Step ++
  • img.style.top = img.offsetTop - sy
  • img.style.left = img.offsetLeft - sx
  • setTimeout("Regroup("+id+","+nb+","+Step+")",10)
  • }
  • }
  • </SCRIPT>
  • </HEAD>
  • <BODY SCROLL="no" onload="Separate(0)">
  • <DIV ID=Container STYLE="border: 1 solid black; position: absolute; top: 50; left: 150; width: 470; height: 62;"></DIV>
  • </BODY>
  • </HTML> 
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT>
// 12-11-2003 - francktfr@systeme-d.net
// écrit pour http://www.systeme-d.net
var imgs = new Array()
var ImagesDone = 0
var DivX = 6	//	Nombre de divisions en longueur
var DivY = 2	//	Nombre de divisions en hauteur
var MoveSteps = 150	//	Nombre d'étapes pour le déplacement
var Interval = 2000		//	Temps entre deux images (ms)
AddImage("http://winomail.com/images/ban1.gif")
AddImage("http://www.milimel.com/site/bannieres/ban_2.gif")
function AddImage(Source){
	var img = new Image()
	img.src = Source
	imgs.push(img)
}
function Separate(Index){
	var h = imgs[Index].height / DivY
	var w = imgs[Index].width / DivX
	var MinX = -w*2
	var MaxX = document.body.offsetWidth + 2*w
	var MinY = -h*2
	var MaxY = document.body.offsetHeight + 2*h
	Dones = new Array()
	for (y = 0; y < DivY; y++){
		for (x = 0; x < DivX; x++){
			var i = 0
			var j = 0
			var doit = true
			var small = new Image()
			small.src = imgs[Index].src
			small.id = "SmallImg"
			while (doit){
				i = ((MaxX - MinX) * Math.random() + MinX)
				j = ((MaxY - MinY) * Math.random() + MinY)
				if (((i+w)<0 || i>document.body.offsetWidth) || ( (j+h)<0  || j>document.body.offsetHeight)) {doit=false}
			}
			small.style.cssText = "position: absolute; top: "+(j + (((DivY-y)*h)- small.height - Container.offsetTop))+";left:"+(i + (((DivX-x)*w)- small.width - Container.offsetLeft))+"; clip:  rect(" + (y*h) + ", " + ((x+1)*w) + ", " + ((y+1)*h) + ", " + (x*w) + ")"
			Container.insertAdjacentElement("afterBegin", small)
		}
	}
	ImagesDone = 0
	//WaitImages(Index)
	for (i=0; i<SmallImg.length; i++){setTimeout("Regroup("+Index+","+i+",1)",50)}
}
function Clear(Index){
	if (typeof(BigImg) != "undefined"){Container.removeChild(BigImg)}
	SmallImg[0].style.zIndex = 10
	SmallImg[0].style.cssText = ""
	SmallImg[0].id = "BigImg"
	var nb = SmallImg.length
	for (i=0; i<nb; i++){if (typeof(SmallImg[0]) != "undefined"){Container.removeChild(SmallImg[0])}}
	BigImg.style.zIndex = -1
	Index >= (imgs.length-1) ?  Index=0 : Index ++
	setTimeout("Separate("+Index+")",Interval)
}
function Regroup(id, nb, Step){
	var img = SmallImg[nb]
	var sx = Math.round(img.offsetLeft/(MoveSteps-Step))
	var sy = Math.round(img.offsetTop/(MoveSteps-Step))
	if (Step >= MoveSteps)
		{
			img.left = 0
			img.top = 0
			ImagesDone++
			if (ImagesDone == (DivX*DivY)){setTimeout("Clear("+id+")",10)}
			return(0)
		}
		else
		{	
			Step ++
			img.style.top = img.offsetTop - sy
			img.style.left = img.offsetLeft - sx
			setTimeout("Regroup("+id+","+nb+","+Step+")",10)
		}
}
</SCRIPT>
</HEAD>
<BODY SCROLL="no" onload="Separate(0)">
<DIV ID=Container STYLE="border: 1 solid black; position: absolute; top: 50; left: 150; width: 470; height: 62;"></DIV>
</BODY>
</HTML>



 Sources du même auteur

Source avec une capture CHOIX DE DATES ET DE PERIODE
HORLOGE DIGITALE , SI SI
Source avec une capture TEXT COLORISÉ AVEC LE POURCENTAGE
Source avec une capture MENU AVEC EFFET DE DÉGRADÉ
ANNONCE LETTRE PAR LETTRE
Toutes les sources de francktfr

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de lukacs le 12/11/2003 13:25:07

Sympa :)

Le seul regret est son usage CPU à mon gout un peu lourd.
Mais bravo quand même :)

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
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,030 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)