Javascript open layer/Close Layer/move layer example code _ javascript skills

JS open layer close layer mobile layer animation effect instance code, friends can refer to the css

The Code is as follows:

Body, span, p, td {font-size: 12px; line-height: 1.5em; color: # 849BCA ;}
# BodyL {float: left; width: 84px; margin-right: 2px ;}
A. od {width: 80px; height: 25px; line-height: 25px; text-align: center; font-weight: bold; border: 2px solid # 849BCA; display: block; color: #547BC9; float: left; text-decoration: none; margin-top: 2px ;}
A. od: link {background: # EEF1F8 ;}
A. od: visited {background: # EEF1F8 ;}
A. od: hover {background: # EEE ;}
A. od: active {background: # EEE ;}
# Fd {width: 500px; height: 200px; background: # EDF1F8; border: 2px solid # 849BCA; margin-top: 2px; margin-left: 2px; float: left; overflow: hidden; position: absolute; left: 0px; top: 0px; cursor: move; float: left;/* filter: alpha (opacity = 50 );*/}
. Content {padding: 10px ;}

Html

The Code is as follows:

[Open layer]
[Close layer]

Mobile Layer

Jq

The Code is as follows:

Var prox;
Var proy;
Var proxc;
Var proyc;
Function show (id) {/* -- open --*/
ClearInterval (prox );
ClearInterval (proy );
ClearInterval (proxc );
ClearInterval (proyc );
Var o = document. getElementById (id );
O. style. display = "block ";
O. style. width = "1px ";
O. style. height = "1px ";
Prox = setInterval (function () {openx (o, 500)}, 10 );
}
Function openx (o, x) {/* -- open x --*/
Var cx = parseInt (o. style. width );
If (cx <x)
{
O. style. width = (cx + Math. ceil (x-cx)/5) + "px ";
}
Else
{
ClearInterval (prox );
Proy = setInterval (function () {openy (o, 200)}, 10 );
}
}
Function openy (o, y) {/* -- open y --*/
Var cy = parseInt (o. style. height );
If (cy <y)
{
O. style. height = (cy + Math. ceil (y-cy)/5) + "px ";
}
Else
{
ClearInterval (proy );
}
}
Function closeed (id) {/* -- disable --*/
ClearInterval (prox );
ClearInterval (proy );
ClearInterval (proxc );
ClearInterval (proyc );
Var o = document. getElementById (id );
If (o. style. display = "block ")
{
Proyc = setInterval (function () {closey (o)}, 10 );
}
}
Function closey (o) {/* -- open y --*/
Var cy = parseInt (o. style. height );
If (cy> 0)
{
O. style. height = (cy-Math. ceil (cy/5) + "px ";
}
Else
{
ClearInterval (proyc );
Proxc = setInterval (function () {closex (o)}, 10 );
}
}
Function closex (o) {/* -- open x --*/
Var cx = parseInt (o. style. width );
If (cx> 0)
{
O. style. width = (cx-Math. ceil (cx/5) + "px ";
}
Else
{
ClearInterval (proxc );
O. style. display = "none ";
}
}
/* ------------------------- Drag the mouse ---------------------*/
Var od = document. getElementById ("fd ");
Var dx, dy, mx, my, mouseD;
Var odrag;
Var isIE = document. all? True: false;
Document. onmousedown = function (e ){
Var e = e? E: event;
If (e. button = (document. all? 1: 0 ))
{
MouseD = true;
}
}
Document. onmouseup = function (){
MouseD = false;
Odrag = "";
If (isIE)
{
Od. releaseCapture ();
Od. filters. alpha. opacity = 100;
}
Else
{
Window. releaseEvents (od. MOUSEMOVE );
Od. style. opacity = 1;
}
}
// Function readyMove (e ){
Od. onmousedown = function (e ){
Odrag = this;
Var e = e? E: event;
If (e. button = (document. all? 1: 0 ))
{
Mx = e. clientX;
My = e. clientY;
Od. style. left = od. offsetLeft + "px ";
Od. style. top = od. offsetTop + "px ";
If (isIE)
{
Od. setCapture ();
Od. filters. alpha. opacity = 50;
}
Else
{
Window. captureEvents (Event. MOUSEMOVE );
Od. style. opacity = 0.5;
}
// Alert (mx );
// Alert (my );
}
}
Document. onmousemove = function (e ){
Var e = e? E: event;
// Alert (mrx );
// Alert (e. button );
If (mouseD = true & odrag)
{
Var mrx = e. clientX-mx;
Var mry = e. clientY-my;
Od. style. left = parseInt (od. style. left) + mrx + "px ";
Od. style. top = parseInt (od. style. top) + mry + "px ";
Mx = e. clientX;
My = e. clientY;
}
}