JavaScript实现动态移动层及拖动浮层关闭的方法
作者:异步漫步时间:2026-10-29 09:06:17浏览:195
本文介绍如何使用JavaScript实现动态移动层及拖动浮层关闭的功能。通过定义层样式与事件监听,实现鼠标拖动交互及关闭效果,适合前端开发参考。
JS动态移动层与拖动关闭实现
本文详细讲解了利用JavaScript实现动态移动层以及拖动浮层关闭的具体方法,旨在为读者提供实用的代码参考。
<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>
希望本文提供的技术方案能对各位在JavaScript程序设计方面带来帮助。
作者最新文章
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
