网页页面浮动窗口示例代码（JavaScript Code）

最新推荐文章于 2025-02-05 14:13:35 发布

要什么昵称嘛

最新推荐文章于 2025-02-05 14:13:35 发布

阅读量3.1w

点赞数

分类专栏： 31 Web 61 Other Technique 文章标签： javascript function microsoft generator div filter

本文链接：https://blog.youkuaiyun.com/arui319/article/details/255476

版权

本文展示了如何使用JavaScript创建一个浮动窗口，该窗口可被最小化、还原和关闭，并且可以自由拖动。通过示例代码详细解释了实现过程，包括HTML、CSS和JavaScript的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：

具体使用方法，看下面的这个完整的页面代码应该就知道了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
  //锁定标题栏;
  obj.setCapture();
  //定义对象;
  var win = obj.parentNode;
  var sha = win.nextSibling;
  //记录鼠标和层位置;
  x0 = event.clientX;
  y0 = event.clientY;
  x1 = parseInt(win.style.left);
  y1 = parseInt(win.style.top);
  //记录颜色;
  normal = obj.style.backgroundColor;
  //改变风格;
  obj.style.backgroundColor = hover;
  win.style.borderColor = hover;
  obj.nextSibling.style.color = hover;
  sha.style.left = x1 + offx;
  sha.style.top = y1 + offy;
  moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveab

最低0.47元/天解锁文章