Rodrigo26 Postado Junho 13, 2011 Denunciar Share Postado Junho 13, 2011 (editado) <html> <head> <title>Ampliando e reduzindo imagens de forma gradativa</title> <script type="text/javascript" src="core.js"></script> <script type="text/javaScript"> var imagens = { init: function() { var pai = document.getElementById("ex1"); var filhos = pai.getElementsByTagName("img"); for(i=0;i<filhos.length;i++) { Core.addEventListener(filhos[i], "click", imagens.executa); } }, executa: function(event) { var objetoImagem = this; this._intervalo = setInterval(function(){imagens.redimensiona(objetoImagem)}, 20); Core.preventDefault(event); }, // amplia a imagem até 800x600 ou 600x800 redimensiona: function(obj) { var largura, altura; if(obj.width>=800 || obj.height>=800) { largura = obj.width/102; altura = obj.height/102; aumentar=false; } else { largura = obj.width/20; altura = obj.height/20; aumentar=true; } largura = Math.round((largura/2)); altura = Math.round((altura/2)); if(aumentar) { if(obj.width>=800 || obj.height>=800) { aumentar = false; clearInterval(this._intervalo); if(obj.width>obj.height) { obj.width = 800; obj.height = 600; } else { obj.width = 600; obj.height = 800; } return; } else { obj.width+=largura; obj.height+=altura; } } else { if(obj.width<=120 || obj.height<=120) { aumentar = true; clearInterval(this._intervalo); if(obj.width>obj.height) { obj.width = 160; obj.height = 120; } else { obj.width = 120; obj.height = 160; } return; } else { obj.width-=largura; obj.height-=altura; } } } }; Core.start(imagens); </script> </head> <body> <center> <div id="ex1"> <img src='samurai-champloo1.jpg' width='161' height='120' alt='' /> <img src='samurai-champloo2.jpg' width='162' height='120' alt='' /> <img src='samurai-champloo3.jpg' width='163' height='120' alt='' /> <img src='samurai-champloo4.jpg' width='164' height='120' alt='' /> </div> </center> </body>Peguei a biblioteca core em - http://www.sitepoint.com/public/corelib/core.zipPor sinal é livre para divulgação, download, etc.O script funciona, mas o laço não é encerrado.grato, Editado Junho 14, 2011 por Rodrigo26 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Willian Gustavo Veiga Postado Junho 13, 2011 Denunciar Share Postado Junho 13, 2011 Você recebe alguma mensagem de erro?Um abraço. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Rodrigo26 Postado Junho 14, 2011 Autor Denunciar Share Postado Junho 14, 2011 (editado) O script funciona, mas o setInterval não é encerrado. O problema é que não estou identificandoo erro de lógica desse script. Editado Junho 16, 2011 por Rodrigo26 Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Rodrigo26
<html> <head> <title>Ampliando e reduzindo imagens de forma gradativa</title> <script type="text/javascript" src="core.js"></script> <script type="text/javaScript"> var imagens = { init: function() { var pai = document.getElementById("ex1"); var filhos = pai.getElementsByTagName("img"); for(i=0;i<filhos.length;i++) { Core.addEventListener(filhos[i], "click", imagens.executa); } }, executa: function(event) { var objetoImagem = this; this._intervalo = setInterval(function(){imagens.redimensiona(objetoImagem)}, 20); Core.preventDefault(event); }, // amplia a imagem até 800x600 ou 600x800 redimensiona: function(obj) { var largura, altura; if(obj.width>=800 || obj.height>=800) { largura = obj.width/102; altura = obj.height/102; aumentar=false; } else { largura = obj.width/20; altura = obj.height/20; aumentar=true; } largura = Math.round((largura/2)); altura = Math.round((altura/2)); if(aumentar) { if(obj.width>=800 || obj.height>=800) { aumentar = false; clearInterval(this._intervalo); if(obj.width>obj.height) { obj.width = 800; obj.height = 600; } else { obj.width = 600; obj.height = 800; } return; } else { obj.width+=largura; obj.height+=altura; } } else { if(obj.width<=120 || obj.height<=120) { aumentar = true; clearInterval(this._intervalo); if(obj.width>obj.height) { obj.width = 160; obj.height = 120; } else { obj.width = 120; obj.height = 160; } return; } else { obj.width-=largura; obj.height-=altura; } } } }; Core.start(imagens); </script> </head> <body> <center> <div id="ex1"> <img src='samurai-champloo1.jpg' width='161' height='120' alt='' /> <img src='samurai-champloo2.jpg' width='162' height='120' alt='' /> <img src='samurai-champloo3.jpg' width='163' height='120' alt='' /> <img src='samurai-champloo4.jpg' width='164' height='120' alt='' /> </div> </center> </body>Peguei a biblioteca core em - http://www.sitepoint.com/public/corelib/core.zip
Por sinal é livre para divulgação, download, etc.
O script funciona, mas o laço não é encerrado.
grato,
Editado por Rodrigo26Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.