Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Frankstain

Como duplicar imagens em javascript

Por , em Javascript

Recommended Posts

William Bruno    1501

William Bruno
Postado

@Frankstain,

 

não entendi direito. Oque você chama de duplicar ? como isso ficaria ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Frankstain    0

Frankstain
Postado 

<style type="text/css">
html {
	overflow: hidden;
}
body {
	margin: 0px;
	padding: 0px;
	background: #222;
	position: absolute;
	width: 100%;
	height: 100%;
}
#imgbox {
	position: absolute;
	overflow: hidden;
}
#imgbox div {
	position: absolute;
	cursor: pointer;
}
#imgbox img {
	position: absolute;
	-ms-interpolation-mode:nearest-neighbor;
}
#txtbox {
	position: absolute;
	visibility: hidden;
	overflow: hidden;
	background: #333;
	color: #FFF;
	font-family: verdana;
	font-size: 0.8em;
}
</style>

<script type="text/javascript">
// ====================================================
//   __|     _ |     |           |  
//  (_ |  -_)  |  _` |  _ \  _ \  _|
// \___|\___| _|\__,_|\___/\___/\__|
// ---------------------------------------------------
//               === IMGBOX ===
// script: Gerard Ferrandez - Ge-1-doot - August 2oo3
// http://www.dhteumeuleu.com
// DOM version : Mars 2005
// ====================================================

document.onselectstart = function () { return false; }

////////////////////////////
var NX     = 3;
var NY     = 3;
var SP     = 20;
var DELAY  = 96;
////////////////////////////

var object = new Array();
var nI     = 0;
var run    = false;
var xrun   = 0;
var dR     = 1;
var iW     = 0;
var iH     = 0;
var oH     = 0;
var oW     = 0;

function CObj(N,y,x){
       alert("to no Cobjt");
this.obj = document.createElement("div");
this.obj.onclick = new Function("object["+N+"].GE1()");
this.obj.onmousedown = new Function("return false;");
this.img = document.createElement("img");
this.img.src   = IMGSRC[N%nI].src;
this.img.alt   = IMGSRC[N%nI].alt;
this.img.title = IMGSRC[N%nI].title;
this.obj.appendChild(this.img);	
IMGBOX.appendChild(this.obj);
this.object = new Array();
this.x      = x;
this.y      = y;
this.N      = N;
this.W      = 0;
this.H      = 0;
this.L      = 0;
this.T      = 0;

function CImg(Parent,y,x){
	this.Parent = Parent;
	this.obj = document.createElement("div");
	this.obj.style.overflow="hidden";
	this.img = document.createElement("img");
	this.img.src   = IMGSRC[N%nI].src;
	this.img.alt   = IMGSRC[N%nI].alt;
	this.img.title = IMGSRC[N%nI].title;
	this.obj.appendChild(this.img);	
	this.Parent.obj.appendChild(this.obj);
	this.N   = Parent.N;
	this.x   = x;
	this.y   = y;
	this.W   = 0;
	this.H   = 0;
	this.L   = 0;
	this.T   = 0;
	this.dx  = 0;
	this.dy  = 0;
	this.px  = 0;
	this.py  = 0;
	this.dw  = 0;
	this.dh  = 0;
	this.pw  = 0;
	this.ph  = 0;
	this.ipx = 0;
	this.ipy = 0;
	this.idx = 0;
	this.idy = 0;

	this.GE2 = function (){
		with(this){
			px -= dx * dR;
			py -= dy * dR;
			pw += dw * dR;
			ph += dh * dR;
			ipx -= idx * dR;
			ipy -= idy * dR;

			with(obj.style){
				left   = Math.round(px)+'px';
				top    = Math.round(py)+'px';
				width  = Math.round(pw+1)+'px';
				height = Math.round(ph+1)+'px';
				if(dR==-1)if(pw<=W+1)obj.style.visibility="hidden";
			}

			with(img.style){
				left   = Math.round(ipx-oW)+'px';
				top    = Math.round(ipy-oH)+'px';
			}

			if(++xrun>=NX*NY*SP){
				xrun=0;
				run=false;
				if(dR==-1)Parent.obj.style.zIndex = 0;
				dR = -dR;
			}
		}
	}

	this.GE1 = function (N1,N2){
                      alert("to no GE1");
		with(this){
			if(dR==1){


                                       px  = L;
				py  = T;
				dx  = ((Parent.L + L) - (x * Parent.W)) / SP;
				dy  = ((Parent.T + T) - (y * Parent.H)) / SP;
				pw  = W;
				ph  = H;
				dw  = (Parent.W - W) / SP;
				dh  = (Parent.H - H) / SP;
				ipx = -L;
				ipy = -T;
				idx = ((x * Parent.W) - L) / SP;
				idy = ((y * Parent.H) - T) / SP;
			}
			obj.style.visibility="visible";
			if(img.height>document.body.offsetHeight)oH=(img.height-document.body.offsetHeight)/2; else oH = 0;
			if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2))/2; else oW = 0;
			for(i=0;i<SP;i++) setTimeout("object["+N1+"].object["+N2+"].GE2()",16*i);
		}
	}

	this.DOOT = function (){

                           with(this){

			W =  Parent.W  / NX;
                               H =  Parent.H / NY;
			L =  x * W;
			T =  y * H;
		}
	}
}

var  k = 0;
for(var i=0;i<NY;i++)
	for(var j=0;j<NX;j++)
		this.object[k++] = new CImg(this,i,j);

this.GE1  = function (){
	with(this){
		if(!run){
			TXTBOX.innerHTML = "<div style='margin:2%'>"+TXTSRC[N%nI].innerHTML+"</"+"div>";
			run = true;
			obj.style.zIndex = 1;
			for(var i=0;i<NX*NY;i++) setTimeout("object["+N+"].object["+i+"].GE1("+N+","+i+")",i*DELAY);
		}
	}
}

this.DOOT = function (){
	alert("to no Doot1");
                 with(this){
		if(img.width<iW)iW=img.width;
		if(img.height<iH)iH=img.height;
		W = iW  / NX;
		H = iH / NY;
		L = x * W;
		T = y * H;
		with(obj.style){
			width  = Math.round(W)+'px';
			height = Math.round(H)+'px';
			left   = Math.round(L)+'px';
			top    = Math.round(T)+'px';
		}
		with(img.style){
			width  = Math.round(W)+'px';
			height = Math.round(H)+'px';
		}
		for(var i in object) object[i].DOOT();
	}
}
}


onload = function() {
IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");
TXTSRC = document.getElementById("txtsrc").getElementsByTagName("div");
IMGBOX = document.getElementById("imgbox");
TXTBOX = document.getElementById("txtbox");
CENTER = document.getElementById("center");
iH = document.body.offsetHeight;
iW = document.body.offsetWidth/2;
nI = IMGSRC.length;
var k = 0;
for(var i=0;i<NY;i++){
	for(var j=0;j<NX;j++){
		object[k] = new CObj(k,i,j);
                       alert(k+","+i+","+j);
		object[k++].DOOT();

	}
}
IMGBOX.style.width  = Math.round(iW)+'px';
IMGBOX.style.height = Math.round(iH)+'px';
TXTBOX.style.width  = Math.round(iW)+'px';
TXTBOX.style.height = Math.round(iH)+'px';
TXTBOX.style.left   = Math.round(iW)+'px';
TXTBOX.style.visibility="visible";
CENTER.style.left   = Math.round(-iW)+'px';
CENTER.style.top    = Math.round(-iH/2)+'px';
}
</script>
</head>

<body>
<div style="position:absolute;left:50%;top:50%;"><div id="center" style="position:absolute">

<div id="imgbox"></div>
<div id="txtbox">
	<div style="margin:2%">
	<h2>IMGBOX</h2>Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here.<br>
	<br>Note: for performance reasons, images are not resized and must be all of the same size. 
	</div>
</div>

</div></div>

<div id="imgsrc" style="visibility:hidden">
<img alt="" title="the river" src="foto1.jpg">
<img alt="" title="transparency" src="foto2.jpg">
<img alt="" title="cold" src="foto3.jpg">
<img alt="" title="sank in" src="foto3.jpg">
<img alt="" title="masked" src="foto4.jpg">

</div>

<div id="txtsrc" style="visibility:hidden">
<div><h2>the river</h2><br>Awaken from my nap by the river</div>
<div><h2>transparency</h2><br>Its transparency was hypnotizing.</div>
<div><h2>cold</h2><br>Currents of cold water played with light.</div>
<div><h2>sank in</h2><br>I threw a few nuts into the river. They floated for a while, then sank in.</div>
<div><h2>masked</h2><br>A wide stepping stone masked the water's depth.</div>
<div><h2>a glimpse</h2><br>Later on, I had a glimpse of the river's bed.</div>
<div><h2>forgotten</h2><br>The wheelchair made a noise. Again, I had forgotten about my legs.</div>
<div><h2>floated</h2><br>Still, I floated in oblivion of things too real.</div>
<div><h2>for me</h2><br>I stared fixedly at the water's open arms. The stream was singing for me.</div>
</div>

<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span>
<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
<script type="text/javascript">m00=document.getElementById("imgsrc").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>
<!-- end of images_loading_bar code -->

</body>
</html>

Alguem que entenda esse codigo...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito