由 amtd 发布于: 2001-02-20 09:30

在主页中插入一个可任意移动的层




　　随着网络的发展，人们越来越不满足静态的网页，所以DHTML流行起来了。一时间，网上的各种主页特效也突然多了起来，像跟随光标的物体、飞舞的文字等。这次我们介绍一个可任意拖动的层。

　　现在IE浏览器仍然不支持〈LAYER〉标记，但是我们却可以通过〈DIV〉来创建两种浏览器能识别的层。对于层我们就说这么多，只要你理解它是一个可以叠加在其他HTML元素上的一个容器，在其中可以插入任何合法的HTML标记如一个表格、图片等内容。

　　我们知道，主页中插入的物件位置一般都是固定的，用户浏览的时候不能对页面元素的位置进行操作。不过在JavaScript应用广泛的今天，我们可以用光标把它拖动到我们想要它出现的位置，在不想看到它的时候我们甚至可以用一个 Show－Hide Layer 将其隐藏。

　　下面给出整个程序代码：

　　〈html〉

　　〈head〉

　　〈title〉ONLY′S aBoUt DeSiGn〈/title〉

　　〈meta http－equiv=″Content－Type″ content=″text/html; charset=gb2312″〉

　　〈/head〉

　　〈body bgcolor=″＃FFFFFF″〉

　　〈script language=″JavaScript″〉

　　〈!－－

　　IE4 = (document.all) ? 1 : 0;

　　NS4 = (document.layers) ? 1 : 0;

　　ver4 = (IE4 || NS4) ? 1 : 0;

　　currentX = currentY = 0;

　　whichEl = null;

　　function grabEl(e) {

　　　　if (IE4) {

whichEl=event.srcElement;

　　　　　　 while (whichEl.id.indexOf(″KBDRAG″) == －1) {

　　　　 whichEl=whichEl.parentElement;

　　　　　　 if (whichEl == null) {

return

} } }

　　　　else { mouseX = e.pageX;

mouseY = e.pageY;　　

　　　　　　for ( i=0; i〈document.layers.length; i＋＋ ) {

　　　　 tempLayer = document.layers[i];

　　　　　　　　if ( tempLayer.id.indexOf(″KBDRAG″) == －1 ) { continue }

　　　　　　　　if ( (mouseX 〉 tempLayer.left) ＆＆ (mouseX 〈 (tempLayer.left ＋ tempLayer.clip.width)) ＆＆ (mouseY 〉 tempLayer.top) ＆＆ (mouseY 〈 (tempLayer.top ＋ tempLayer.clip.height)) ) { whichEl = tempLayer; } }　　

　　　　　　if (whichEl == null) {

return } }　　

　　　　if (whichEl != activeEl) {

　　　　　　if (IE4) { }

　　　　　　else {

　　 whichEl.moveAbove(activeEl) };

　　　　　　　　activeEl = whichEl; }

if (IE4) {

　　　　　　whichEl.style.pixelLeft = whichEl.offsetLeft;

　　　　　　whichEl.style.pixelTop = whichEl.offsetTop;　　

　　　　　　currentX = (event.clientX ＋ document.body.scrollLeft);

　　　　　　currentY = (event.clientY ＋ document.body.scrollTop); }

　　　　else {

currentX = e.pageX;

currentY = e.pageY;　　

　　　　　　document.captureEvents(Event.MOUSEMOVE);

　　　　document.onmousemove=moveEl; }}

　　function moveEl(e) {

if (whichEl == null) {

return };

　　　　if (IE4) {

newX = (event.clientX ＋ document.body.scrollLeft);

　　　　　　newY = (event.clientY ＋ document.body.scrollTop); }

　　　　else {

newX = e.pageX;

newY = e.pageY; }

　　　　distanceX = (newX － currentX);

　　　　distanceY = (newY － currentY);

　　　　currentX = newX;

　　　　currentY = newY;

if (IE4) {

　　 whichEl.style.pixelLeft ＋=distanceX;

　　 whichEl.style.pixelTop ＋=distanceY;

　　　　　　event.returnValue = false; }

　　　　else {

whichEl.moveBy(distanceX,distanceY) } }　　

　　function checkEl() {

if (whichEl!=null) {

return false } }

　　function dropEl() {

　　　　if (NS4) {

document.releaseEvents(Event.MOUSEMOVE) }

　　　　whichEl = null; }

　　　　function cursEl() {

　　　　if (event.srcElement.id.indexOf(″KBDRAG″) != －1) {

　　　　　　event.srcElement.style.cursor = ″move″ } }　　

　　if (ver4) {

if (NS4) {

　　　　　　document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

　　　　　　activeEl = document.dropKBDRAG; }

else {

　　　　 document.onmousemove = moveEl;

　　　　 document.onselectstart = checkEl;

　　　　 document.onmouseover = cursEl;

　　　　 activeEl = document.all.dropKBDRAG; }　　

　　　　document.onmousedown = grabEl;

　　　　document.onmouseup = dropEl; }

　　//－－〉

　　〈/script〉

　　〈div id=′dropKBDRAG′ style=′position:absolute; left:50; top:50; width:50; height:50; background－color: ＃0000FF; layer－background－color: ＃0000FF; border: 1px none ＃000000′〉〈/div〉

　　〈/body〉

　　〈/html〉

　　将其另行保存为＊.htm 或 ＊.html 就可以，〈Script〉部分不能做任何改动。对于〈DIV〉我们可以做任意的修改和调整，或者在其中插入一些主页元素。只要注意 id=′dropKBDRAG′部分不要弄错！

　　这样，你就可以像在Windows桌面拖动一个窗口一样拖动你主页中这个层了！




（作者：王超　2000年03月17日 14:31）
__________________