JS实现动态移动层及拖动浮层关闭的方法

作者：休闲生活文化时间：2024-06-17 02:34:00　

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

标签：JS,拖动,浮层

投稿

JS实现动态移动层及拖动浮层关闭的方法

猜你喜欢

JS脚本加载后执行相应回调函数的操作方法

MySQL 如何查询当前最新事务ID

mycat在windows环境下的安装和启动

Oracle 创建用户及数据表的方法

python 阿里云oss实现直传签名与回调验证的示例方法

Pinia简单使用以及数据持久化详解

解说mysql之binlog日志以及利用binlog日志恢复数据的方法

python3 pygame实现接小球游戏

如何利用python进行时间序列分析

Python的Django框架中settings文件的部署建议

学习ASP.NET八天入门：第二天

ASP.NET中MVC从后台控制器传递数据到前台视图的方式

Python实现基于KNN算法的笔迹识别功能详解

Golang协程池gopool设计与实现

解析MySQL设置当前时间为默认值的方法

在sql中实现取一行最大值或者最小值

PLSQL14下载与安装使用教程

Mysql中mvcc各场景理解应用

Python OpenCV对本地视频文件进行分帧保存的实例

Atom的python插件和常用插件说明