esta es la solución que yo estoy realizando espero que les guste
todavía no esta terminada pero vean el código y prubenla esta muy buena
Código PHP:
Ver original<!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=utf-8" />
<title
>Documento
sin t
í
;tulo
</title
> <style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
background:#FFCC00;
border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
function restar(obj){
g=parseInt(document.getElementById(obj).style.height);
document.getElementById("fg").innerHTML = g;
if(g<=50){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); }
</script>
</head>
<body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> <a onclick="restar('cuadros')">cuadros uno pregar</a> <a onclick="mover('cuadro')">cuadro dos</a>
<a onclick="restar('cuadro')">cuadro dos pregar</a>
<div class="contenedor" >
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px;" onClick="mover('cuadros')">click</div>
<br />
<br />
<br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px;" >click</div>
</div>
<div id="fg"></div>
</body>
</html>