修改为支持多个层拖动模式可以制作为[许愿墙]

http://bbs.blueidea.com/thread-2784653-1-1.html
Div Move Temp

点我调用拖动窗口

显示窗口

最大化窗口

点我调用拖动窗口

显示窗口

最大化窗口

点我调用拖动窗口

显示窗口

最大化窗口

点我调用拖动窗口

显示窗口

最大化窗口

点我调用拖动窗口

显示窗口

最大化窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{

}{

/**//*background-image:url(http://mxd.sdo.com/web2005/download/image/wall_0201.jpg);*/

}

.InfoKuang {

}{

position:absolute;

width:130px;

height:85px;

z-index:1;

filter:alpha(Opacity=60,style=0);

opacity:0.6;

padding: 3px;

border: 1px dashed #000000;

z-index:5000;

font-size:9pt;

}

.InfoKuang ul {

}{

margin: 1px;

padding: 0px;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: none;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-top-color: #000000;

border-right-color: #000000;

border-bottom-color: #000000;

border-left-color: #000000;

color: #000000;

background-color:#0faead;

}

.InfoKuang li {

}{

height:24px;

padding: 1px;

line-height: 24px;

}

.main{

}{ width:500px;

height:300px;}

</style>

//通用移动 Div 类

//请保留一下我的信息,谢谢

//Edit By Skybot

//QQ:35287352

function Tong_MoveDiv()

{

//参数说明

// id 要移动的层ID

// Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;

// T 为 int 有数字是拖动没有是变大小

this.Move=function(Id,Evt,T)

{

if(Id=="") return;

var o = document.getElementById(Id);

if(!o) return;//如果这个东东不在

evt = Evt ? Evt : window.event;

o.style.position = "absolute";//设定他的样式为绝对定位

o.style.zIndex = 200;//这里显示上下的

var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素使它在FF中也可以用

//得到当前对要移动对象的坐标

var w = o.offsetWidth;

var h = o.offsetHeight;

var l = o.offsetLeft;

var t = o.offsetTop;

var div = document.createElement("DIV");//新原素DIV

document.body.appendChild(div);

div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px; top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter；注意opacity 是FF中的 Opacity

div.setAttribute("id", Id +"temp");

if(T)//看看是拖动还是变大小

{

this.Move_OnlyMove(Id,evt);

}

else

{

}

//移动函数

//参数 Id 要移动的层ID

//Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event;

this.Move_OnlyMove = function(Id,Evt)

{

var o = document.getElementById(Id+"temp");

if(!o) return;

evt = Evt?Evt:window.event;//都是FF 才要这么写的

var relLeft = evt.clientX - o.offsetLeft;//得到左边的宽度

var relTop = evt.clientY - o.offsetTop;//得到上边的宽度

//抓取事件

if (!window.captureEvents)

{

o.setCapture(); //指定抓取事件

}

else

{

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

//文档的 onmousemove 事件

document.onmousemove = function(e)

{

if (!o) return;

e = e ? e : window.event;

if (e.clientX - relLeft <= 0)

o.style.left = 0 +"px";

else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)

o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";

else

o.style.left = e.clientX - relLeft +"px";

if (e.clientY - relTop <= 1)

o.style.top = 1 +"px";

else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)

o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";

else

o.style.top = e.clientY - relTop +"px";

}

//文档的 onmouseup 事件

document.onmouseup = function()

{

if (!o) return;

if (!window.captureEvents)

o.releaseCapture();

else

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

var o1 = document.getElementById(Id);

if (!o1) return;

var l0 = o.offsetLeft;

var t0 = o.offsetTop;

var l = o1.offsetLeft;

var t = o1.offsetTop;

MyMove.Move_e(Id, l0 , t0, l, t);

document.body.removeChild(o);

o = null;

}

this.Move_e = function(Id, l0 , t0, l, t)

{

if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);

var o = document.getElementById(Id);

if (!o) return;

var sl = st = 8;

var s_l = Math.abs(l0 - l);

var s_t = Math.abs(t0 - t);

if (s_l - s_t > 0)

if (s_t)

sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;

else

sl = 0;

else

if (s_l)

st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;

else

st = 0;

if (l0 - l < 0) sl *= -1;

if (t0 - t < 0) st *= -1;

if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;

if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;

if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;

if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;

if (s_l == 0 && s_t == 0) return;

if (Math.abs(l + sl - l0) < 2)

o.style.left = l0 +"px";

else

o.style.left = l + sl +"px";

if (Math.abs(t + st - t0) < 2)

o.style.top = t0 +"px";

else

o.style.top = t + st +"px";

window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);

}

var MyMove = new Tong_MoveDiv();

</script>

</head>

<body>

<span style="cursor:move;">点我调用拖动窗口</span>

<ul>

<li>

</li>

</ul>

<ul>

<li>

显示窗口

</li>

</ul>

<ul>

<li>

最大化窗口

</li>

</ul>

</div>

<span style="cursor:move;">点我调用拖动窗口</span>

<ul>

<li>

</li>

</ul>

<ul>

<li>

显示窗口

</li>

</ul>

<ul>

<li>

最大化窗口

</li>

</ul>

</div>

<span style="cursor:move;">点我调用拖动窗口</span>

<ul>

<li>

</li>

</ul>

<ul>

<li>

显示窗口

</li>

</ul>

<ul>

<li>

最大化窗口

</li>

</ul>

</div>

<span style="cursor:move;">点我调用拖动窗口</span>

<ul>

<li>

</li>

</ul>

<ul>

<li>

显示窗口

</li>

</ul>

<ul>

<li>

最大化窗口

</li>

</ul>

</div>

<span style="cursor:move;">点我调用拖动窗口</span>

<ul>

<li>

</li>

</ul>

<ul>

<li>

显示窗口

</li>

</ul>

<ul>

<li>

最大化窗口

</li>

</ul>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/CB/archive/2008/04/06/1139018.html

修改为支持多个层拖动模式可以制作为[许愿墙]相关推荐

Linux修改网络支持巨型帧,RAC私网使用巨型帧 Solaris虚拟化环境修改MTU
背景介绍: 需求: 部署3节点oracle RAC时, 要求4网口中,公网网口使用2个并用 ipmp 绑定, 私网网口使用 HAIP 并支持巨型帧 (Jumbo Frame) 主机: 3节点主机均为 ...
测试用例支持思维导图编辑模式，MeterSphere开源持续测试平台v1.8.0发布丨Release Notes
3月25日,MeterSphere一站式开源持续测试平台正式发布v1.8.0版本.v1.8.0版本是2021年农历春节后的第一个版本,经过近两个月的迭代,我们为大家带来了众多的功能更新及优化. 测试用 ...
修改 mysql 支持远程连接
修改 mysql 支持远程连接 use mysqlmysql> select host, user from user; 将相应用户数据表中的host字段改成'%': update user s ...
Android系统移植与调试之-------如何修改Android设备添加重启、飞行模式、静音模式等功能（一）...
1.首先先来看一下修改前后的效果对比图修改之后的图片确认重启界面具体的修改内容在下一篇中具体介绍. Android系统移植与调试之------->如何修改Android设备添加重启.飞行模 ...
Dell poweredge r210进BIOS修改磁盘控制器（SATA Controller）接口模式
Dell poweredge r210进BIOS修改磁盘控制器(SATA Controller)接口模式开机后按F2键进入BIOS设置,如下图: BIOS设置主界面: 使用上下键移动光标到" ...
jz2440开发板移植U-boot之修改代码支持DM9000网卡
今天我们来移植U-boot到jz2440开发板,修改代码支持DM9000网卡.查看之前写的移植记录请点击链接:点击查看之前的移植记录现在大多数开发板都支持DM9000网卡.我们的U-boot源码里面 ...
jz2440开发板修改UBOOT支持NAND FLASH
很多天没有看嵌入式的东西了,今天来看一下,继续之前移植uboot到jz2440开发板.今天我们来实现Uboot支持NAND FLASH. 在之前的文章里(点击连接查看之前的记录),我们为了编译通过把N ...
移植uboot之修改代码支持NorFlash记录续集
接着上一篇文章写的内容(上一篇文章链接:移植uboot之修改代码支持NORFLASH),上一篇结尾测试flash的擦除读写功能,结果无法写flash,卡在了这里: 前面已经擦除成功,这里写内容写不进去 ...
ThinkCMF是一款支持Swoole的开源内容管理框架，基于ThinkPHP开发，同时支持PHP-FPM和Swoole双模式，让WEB开发更快!
简介: ThinkCMF5.1主要特性更改框架协议为MIT,让你更自由地飞基于ThinkPHP 5.1重构,但核心代码兼容5.0版本,保证老用户最小升级成本增加对swoole支持,同时支持swo ...
印象笔记终于支持默认markdown预览模式
印象笔记终于支持默认markdown预览模式通过多年的等待及反馈,markdown终于在[印象笔记 7.0.28.5418 版]中支持的,设置默认预览模式的支持. 一.准备工作把当前版本升级为 [ ...

修改为支持多个层拖动模式可以制作为[许愿墙]

修改为支持多个层拖动模式可以制作为[许愿墙]相关推荐

最新文章

热门文章