<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>dom Translucent Tip Layer </title>
<style type= "Text/css" >
Body,span,div,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;
}
. content{
padding:10px;
}
</style>
<body>
<div id= "Bodyl" >
<a href= "#" class= "od" onclick = "Show (' fd '); return false;" >
[Open layer]
</a>
<a href= "#" class= "od" onclick = "closeed (' fd '); return false;" >
[Close layer]
</a>
</div>
<div id= "FD" style= "Display:none;filter:alpha (opacity=100); opacity:1;" >
<div class= "Content" > Mobile layer </div>
</div>
<script type= "Text/javascript" >
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) {/*--close--*/
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";
}
}
/* Mouse Drag */
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;
}
}
</script><br/>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
JavaScript animations Open the translucent cue layer
