estou criando um site no qual os internautas terão a disponibilidade de dimensioná-lo porem criei esse script para testar, e quando clico para voltar a um tamnho normal, ou retornar a um maior a DIV fica piscando e não anima :wacko: alguém poderia me ajudar a corrigir o erro?
Segue ai o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>teste</title><script type="text/javascript">
function moveTo(elm,dist) {
var x=parseInt(elm.style.width);
var distance=dist-x;
var tot=x+Math.ceil((distance/2));
elm.style.width=tot+'px';
function c() {
moveTo(elm,dist);
}
if(distance==0) {
clearTimeout(timer);
return;
}
timer=setTimeout(c,80);
}
function changeWidthWrong(elm,toWidth) {
var beginningWidth = parseInt(elm.style.width);
for(i=beginningWidth;i<=toWidth;i+=10) {
var add = beginningWidth+i;
elm.style.width = add+'px';
}
}
function changeWidthB(elm,toWidth) {
var beginningWidth = parseInt(elm.style.width)+10;
elm.style.width = beginningWidth+'px';
}
function wrapchangeWidth() {
changeWidthB(document.getElementById('bluesquare3'),400);
}
function changeWidthForReal() {
for(i=1;i<=10;i++){
setTimeout(wrapchangeWidth,100*i);
}
}
function changeWidthFinal(elm,toWidth,delay){
var width = parseInt(elm.style.width);
var change = toWidth-width;
var total=width+Math.ceil((change/2));
document.getElementById('debug').innerHTML='width:'+total+'px change:'+change+'px';
elm.style.width=total+'px';
function c() {
changeWidthFinal(elm,toWidth,delay);
}
if(change==0) {
clearTimeout(timer);
return;
}
timer=setTimeout(c,delay);
}
</script>
<style type="text/css">
<!--
.style1 {
font-size: 18px;
color: #FFFFFF;
}
.style2 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="150" border="0">
<tr>
<td><span class="style2"><br>
</span>
<div class="style1" id="bluesquare" style="width: 200px; height: 150px; background-color: blue;">Conteudo da div - Conteudo da div - </div>
<a onclick="moveTo(document.getElementById('bluesquare'),400)" href="java script:void(0)">Tamanho 1 </a><br />
<a onclick="moveTo(document.getElementById('bluesquare'),200)" href="java script:void(0)">Tamanho 2 </a><br>
</td>
</tr>
</table>
</body>
</html>
Pergunta
Guilherme Teixeira
Olá amigos,
estou criando um site no qual os internautas terão a disponibilidade de dimensioná-lo porem criei esse script para testar, e quando clico para voltar a um tamnho normal, ou retornar a um maior a DIV fica piscando e não anima :wacko: alguém poderia me ajudar a corrigir o erro?
Segue ai o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>teste</title><script type="text/javascript"> function moveTo(elm,dist) { var x=parseInt(elm.style.width); var distance=dist-x; var tot=x+Math.ceil((distance/2)); elm.style.width=tot+'px'; function c() { moveTo(elm,dist); } if(distance==0) { clearTimeout(timer); return; } timer=setTimeout(c,80); } function changeWidthWrong(elm,toWidth) { var beginningWidth = parseInt(elm.style.width); for(i=beginningWidth;i<=toWidth;i+=10) { var add = beginningWidth+i; elm.style.width = add+'px'; } } function changeWidthB(elm,toWidth) { var beginningWidth = parseInt(elm.style.width)+10; elm.style.width = beginningWidth+'px'; } function wrapchangeWidth() { changeWidthB(document.getElementById('bluesquare3'),400); } function changeWidthForReal() { for(i=1;i<=10;i++){ setTimeout(wrapchangeWidth,100*i); } } function changeWidthFinal(elm,toWidth,delay){ var width = parseInt(elm.style.width); var change = toWidth-width; var total=width+Math.ceil((change/2)); document.getElementById('debug').innerHTML='width:'+total+'px change:'+change+'px'; elm.style.width=total+'px'; function c() { changeWidthFinal(elm,toWidth,delay); } if(change==0) { clearTimeout(timer); return; } timer=setTimeout(c,delay); } </script> <style type="text/css"> <!-- .style1 { font-size: 18px; color: #FFFFFF; } .style2 {color: #FFFFFF} --> </style> </head> <body> <table width="150" border="0"> <tr> <td><span class="style2"><br> </span> <div class="style1" id="bluesquare" style="width: 200px; height: 150px; background-color: blue;">Conteudo da div - Conteudo da div - </div> <a onclick="moveTo(document.getElementById('bluesquare'),400)" href="java script:void(0)">Tamanho 1 </a><br /> <a onclick="moveTo(document.getElementById('bluesquare'),200)" href="java script:void(0)">Tamanho 2 </a><br> </td> </tr> </table> </body> </html>Link para o comentário
Compartilhar em outros sites
0 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.