JS實現動態移動層及拖動浮層關閉的方法

2024-05-06 16:19:04

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS實現動態移動層及拖動浮層關閉的方法,可實現動態拖動浮動窗口及關閉窗口的功能,非常具有實用價值,需要的朋友可以參考下

本文實例講述了JS實現動態移動層及拖動浮層關閉的方法。分享給大家供大家參考。具體實現方法如下：

<html>

<head>

<title>動態移動的層</title>

<body bgcolor="#ADBAC9">

<div id="div1" class="yellow" style="VISIBILITY:visible ;

background-color:#FFFF00;

position: absolute; top: 60; left: 200;

width: 360; height: 250;

filter: revealTrans(transition=12, 'duration=0.1)

blendTrans(duration=0.1) ">

<div id=title onmousedown=DIVDown("div1")

style="background-color:#30608F;padding:2px;

font-size:13px;text-indent:5;

color:#FFFFFF;cursor:move">標題</div>

<img id=close onclick=Hide(div1)

style="position: absolute; right: 2; top: 2" border="0"

src="close.gif" width="15" height="15">

</div>

<script language="JavaScript">

var Obj="none";

var pX

var pY

document.onmousemove=DIVMove;

document.onmouseup=DIVUp;

function DIVDown(tag){

Obj=tag;

pX=parseInt(document.all(Obj).style.left)-event.x;

pY=parseInt(document.all(Obj).style.top)-event.y;

}

function DIVMove(){

if(Obj!="none"){

document.all(Obj).style.left=pX+event.x;

document.all(Obj).style.top=pY+event.y;

event.returnValue=false;

}

}

function DIVUp(){Obj="none";}

function Hide(divid){

divid.filters.revealTrans.apply();

divid.style.visibility = "hidden";

divid.filters.revealTrans.play();

}

</script>

</body>

</html>