este code lo he desarrollado espero que les guste esta demaciado bueno todavia le faltan mejoras pero es un code bueno crea un efecto parecido a jquerry
bueno aca el code
// JavaScript Document
var ks=0;
var ks2=0;
var delec;
function deselectionar(){
delec=true;
if (delec == true) {
try {
document.getElementById(objeto.idmover).detachEven t("mousemove", mover);
}
catch (err) {
try {
document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
}
catch (erre3) {
d();
}
ks2 = null;
ks = null;
}
}
}
function d(){
try {
document.getElementById(objeto.idmover).detachEven t("onmousemove", mover);
}
catch (err2s) {
document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
}
delec=false;
}
function selecinar(){
delec = false;
if (delec == false) {
try {
document.getElementById(objeto.idmover).addEventLi stener("mousemove", mover, true);
}
catch (err2) {
document.getElementById(objeto.idmover).attachEven t("onmousemove", mover);
}
}
}
function mover(event){
ks = event.clientY-20;
ks2 = event.clientX-200;
if (delec == false) {
{
document.getElementById(objeto.idmover).style.top = ks + "px";
document.getElementById(objeto.idmover).style.left = ks2 + "px";
}
}if (delec == true){
deselectionar();
}
}
function obtneride(id)
{
var ks= document.getElementById(id);
return ks;
}
function cerrar()
{
}
var objeto=new Object();
objeto.id;
objeto.maximo;
objeto.tamanox;
objeto.child=false;
objeto.childs;
objeto.idmover;
function maximizar()
{
objeto.tamanox+=15;
var doc=document.getElementById(objeto.id);
doc.style.height = objeto.tamanox + "px";
var ks= window.setTimeout("maximizar()",20);
if(objeto.tamanox>objeto.maximo)
{
if(objeto.child==true)
{
document.getElementById(objeto.id).appendChild(obj eto.childs);
}
window.clearTimeout(ks);
}
}
function minimizar()
{
objeto.tamanox-=10;
var doc=document.getElementById(objeto.id);
doc.style.height = objeto.tamanox + "px";
var ks= window.setTimeout("minimizar()",20);
if(objeto.tamanox<objeto.maximo)
{
window.clearTimeout(ks);
}
}
aqui el css
@charset "utf-8";
/* CSS Document */
#boton1{background:url(botones/minimizar.jpg) no-repeat;
width:50px;
background-color:#E6E6E6;
height:49px;
padding:0px;
cursor:pointer; cursor:hand;
border:none;
}
#boton2{background:url(botones/maximizar.jpg) no-repeat;
width:50px;
background-color:#E6E6E6;
height:49px;
padding:0px;
cursor:pointer; cursor:hand;
border:none;
}
#form1{
width:300px;
background-color:#E6E6E6;
border: 1px solid #666;
cursor:move;
}
#b2{
background-color:#CCCCCC;
padding:3px;
border:1px solid #000;
position:absolute;
z-index:1;
top:104px;
left:448px;
width:303px;
height: 270px;
}
#cuerpo{
background:url(botones/cuerpo.gif);
background-color:#FFFFFF;
margin-top:7px;
width:300px;
height:210px;
border: 1px solid #666;
}
#cuerpo #form2{ font-family:"Courier New", Courier, monospace; margin-top:10px; margin-left:70px;
margin-right:30px;}
#cuerpo #form2 #boton3{border:solid #666 1px; background-color:#FFFFFF;
width:63px; height:61px; cursor:pointer; cursor:hand;}
ejemplo coopiar en blog de notas y reemplazar las imagenes con las que ustedes les gusten
<!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>loginplantilla</title>
<link href="miks.css" rel="stylesheet" type="text/css" />
<script src="formulariologin.js" type="text/javascript"></script>
<script type="text/javascript">
function min()
{
objeto.id="b2";
objeto.maximo=60;
objeto.tamanox=300;
var form=obtneride("boton1");
form.disabled=true;
var form=obtneride("boton2");
form.disabled=false;
minimizar();
var ob=obtneride("cuerpo");
document.getElementById("b2").removeChild(ob);
}
function max()
{
objeto.id="b2";
objeto.maximo=260;
objeto.tamanox=75;
objeto.child=true;
var hijodos=document.createElement("form");
var hijotres=document.createElement("input");
var hijocuatro=document.createElement("input");
var hijocinco=document.createElement("input");
var brs=document.createElement("br");
var brs2=document.createElement("br");
var brs3=document.createElement("p");
var brs4=document.createElement("br");
var textou="ID";
var textod="Password";
var textouno=document.createTextNode(textou);
hijodos.appendChild(textouno);
hijodos.appendChild(brs);
var texto2=document.createTextNode(textod);
hijotres.setAttribute("name","uno");
hijotres.setAttribute("id","uno");
hijotres.setAttribute("type","text");
hijocinco.setAttribute("name","boton");
hijocinco.setAttribute("id","boton3");
hijocinco.setAttribute("type","submit");
hijocinco.setAttribute("value","Enviar");
hijodos.appendChild(hijotres);
hijodos.appendChild(brs4);
hijodos.appendChild(texto2);
hijodos.appendChild(brs2);
hijocuatro.setAttribute("name","dos");
hijocuatro.setAttribute("id","tres");
hijocuatro.setAttribute("type","text");
hijodos.appendChild(hijocuatro);
hijodos.setAttribute("name","form2");
hijodos.setAttribute("id","form2");
hijodos.setAttribute("method","post");
hijodos.appendChild(brs3);
hijodos.appendChild(hijocinco);
var hijo=document.createElement("div");
hijo.setAttribute("id","cuerpo");
hijo.appendChild(hijodos);
objeto.childs=hijo;
var form=obtneride("boton1");
form.disabled=false;
var form=obtneride("boton2");
form.disabled=true;
maximizar();
}
window.onload=function(){
var form=obtneride("boton2");
form.disabled=true;
objeto.idmover="b2";
}
function ver(event){
var ksj=event.clientY;
var ks2j=event.clientX;
document.getElementById("unoxk").innerHTML="Y "+ksj+"px X "+ks2j+"ppx";
}
</script>
</head>
<body onmousemove="ver(event);" >
<p id="unoxk">sdsadads</p>
<div id="b2">
<div>
<form id="form1" name="form1" onmousedown="selecinar();" onmouseup="deselectionar();" method="post" action="">
<label>
<input type="button" name="button" onclick="min();" id="boton1" />
</label>
<input type="button" name="boton" onclick="max();" id="boton2" />
</form>
</div>
<div id="cuerpo">
<form id="form2" name="form2" method="post" action="">
<label>ID<br />
<input type="text" name="uno" id="uno" />
<br />
Password<br />
</label>
<label>
<input type="text" name="dos" id="dos" />
</label>
<p>
<label>
<input type="button" name="boton" id="boton3" value="Enviar" />
</label>
</p>
</form>
</div>
</div>
</body>
</html>