📄 509.html

📁 Jsp精华文章合集,JSP方面各种知识介绍
💻 HTML
字号:

<STYLE type=text/css>
<!--
body,td { font-size:9pt;}
hr { color: #000000; height: 1px}
-->
</STYLE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD><TITLE>论坛精华 >> javascript小栈 >> 在主页中插入一个可任意移动的层</title>
</head>
<body >

<p><IMG SRC="../image/jsp001_middle_logo.gif" WIDTH="180" HEIGHT="60" BORDER=0 ALT=""></p>

<table width=100% bgcolor="#cccccc" align=center cellpadding="2" cellspacing="0" border=1 bordercolorlight="#000000" bordercolordark="#FFFFFF">
<tr bgcolor="#EFF8FF"><td>
<a href=http://www.jsp001.com/list_thread.php?int_attribute=4>论坛精华</a>
>> <a href=http://www.jsp001.com/list_thread.php?forumid=46&int_attribute=4>javascript小栈</a>
>> 在主页中插入一个可任意移动的层 [<a href=http://www.jsp001.com/forum/showthread.php?goto=newpost&threadid=509>查看别人的评论</a>]<br>

<hr><p>由 amtd 发布于: 2001-02-20 09:30</p><p><img src="images/icons/icon1.gif" alt="Post" border=0> </p><p>在主页中插入一个可任意移动的层<br><br><br><br><br>　　随着网络的发展，人们越来越不满足静态的网页，所以DHTML流行起来了。一时间，网上的各种主页特效也突然多了起来，像跟随光标的物体、飞舞的文字等。这次我们介绍一个可任意拖动的层。 <br><br>　　现在IE浏览器仍然不支持〈LAYER〉标记，但是我们却可以通过〈DIV〉来创建两种浏览器能识别的层。对于层我们就说这么多，只要你理解它是一个可以叠加在其他HTML元素上的一个容器，在其中可以插入任何合法的HTML标记如一个表格、图片等内容。 <br><br>　　我们知道，主页中插入的物件位置一般都是固定的，用户浏览的时候不能对页面元素的位置进行操作。不过在JavaScript应用广泛的今天，我们可以用光标把它拖动到我们想要它出现的位置，在不想看到它的时候我们甚至可以用一个 Show－Hide Layer 将其隐藏。 <br><br>　　下面给出整个程序代码： <br><br>　　〈html〉 <br><br>　　〈head〉 <br><br>　　〈title〉ONLY′S aBoUt DeSiGn〈/title〉 <br><br>　　〈meta http－equiv=″Content－Type″ content=″text/html; charset=gb2312″〉 <br><br>　　〈/head〉 <br><br>　　〈body bgcolor=″＃FFFFFF″〉 <br><br>　　〈script language=″JavaScript″〉 <br><br>　　〈!－－ <br><br>　　IE4 = (document.all) ? 1 : 0; <br><br>　　NS4 = (document.layers) ? 1 : 0; <br><br>　　ver4 = (IE4 || NS4) ? 1 : 0; <br><br>　　currentX = currentY = 0; <br><br>　　whichEl = null; <br><br>　　function grabEl(e) { <br><br>　　　　if (IE4) { <br><br>whichEl=event.srcElement; <br><br>　　　　　　 while (whichEl.id.indexOf(″KBDRAG″) == －1) { <br><br>　　　　 whichEl=whichEl.parentElement; <br><br>　　　　　　 if (whichEl == null) { <br><br>return <br><br>} } } <br><br>　　　　else { mouseX = e.pageX; <br><br>mouseY = e.pageY;　　 <br><br>　　　　　　for ( i=0; i〈document.layers.length; i＋＋ ) { <br><br>　　　　 tempLayer = document.layers[i]; <br><br>　　　　　　　　if ( tempLayer.id.indexOf(″KBDRAG″) == －1 ) { continue } <br><br>　　　　　　　　if ( (mouseX 〉 tempLayer.left) ＆＆ (mouseX 〈 (tempLayer.left ＋ tempLayer.clip.width)) ＆＆ (mouseY 〉 tempLayer.top) ＆＆ (mouseY 〈 (tempLayer.top ＋ tempLayer.clip.height)) ) { whichEl = tempLayer; } }　　 <br><br>　　　　　　if (whichEl == null) { <br><br>return } }　　 <br><br>　　　　if (whichEl != activeEl) { <br><br>　　　　　　if (IE4) { } <br><br>　　　　　　else { <br><br>　　 whichEl.moveAbove(activeEl) }; <br><br>　　　　　　　　activeEl = whichEl; } <br><br>if (IE4) { <br><br>　　　　　　whichEl.style.pixelLeft = whichEl.offsetLeft; <br><br>　　　　　　whichEl.style.pixelTop = whichEl.offsetTop;　　 <br><br>　　　　　　currentX = (event.clientX ＋ document.body.scrollLeft); <br><br>　　　　　　currentY = (event.clientY ＋ document.body.scrollTop); } <br><br>　　　　else { <br><br>currentX = e.pageX; <br><br>currentY = e.pageY;　　 <br><br>　　　　　　document.captureEvents(Event.MOUSEMOVE); <br><br>　　　　document.onmousemove=moveEl; }} <br><br>　　function moveEl(e) { <br><br>if (whichEl == null) { <br><br>return }; <br><br>　　　　if (IE4) { <br><br>newX = (event.clientX ＋ document.body.scrollLeft); <br><br>　　　　　　newY = (event.clientY ＋ document.body.scrollTop); } <br><br>　　　　else { <br><br>newX = e.pageX; <br><br>newY = e.pageY; } <br><br>　　　　distanceX = (newX － currentX); <br><br>　　　　distanceY = (newY － currentY); <br><br>　　　　currentX = newX; <br><br>　　　　currentY = newY; <br><br>if (IE4) { <br><br>　　 whichEl.style.pixelLeft ＋=distanceX; <br><br>　　 whichEl.style.pixelTop ＋=distanceY; <br><br>　　　　　　event.returnValue = false; } <br><br>　　　　else { <br><br>whichEl.moveBy(distanceX,distanceY) } }　　 <br><br>　　function checkEl() { <br><br>if (whichEl!=null) { <br><br>return false } } <br><br>　　function dropEl() { <br><br>　　　　if (NS4) { <br><br>document.releaseEvents(Event.MOUSEMOVE) } <br><br>　　　　whichEl = null; } <br><br>　　　　function cursEl() { <br><br>　　　　if (event.srcElement.id.indexOf(″KBDRAG″) != －1) { <br><br>　　　　　　event.srcElement.style.cursor = ″move″ } }　　 <br><br>　　if (ver4) { <br><br>if (NS4) { <br><br>　　　　　　document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); <br><br>　　　　　　activeEl = document.dropKBDRAG; } <br><br>else { <br><br>　　　　 document.onmousemove = moveEl; <br><br>　　　　 document.onselectstart = checkEl; <br><br>　　　　 document.onmouseover = cursEl; <br><br>　　　　 activeEl = document.all.dropKBDRAG; }　　 <br><br>　　　　document.onmousedown = grabEl; <br><br>　　　　document.onmouseup = dropEl; } <br><br>　　//－－〉 <br><br>　　〈/script〉 <br><br>　　〈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〉 <br><br>　　〈/body〉 <br><br>　　〈/html〉 <br><br>　　将其另行保存为＊.htm 或 ＊.html 就可以，〈Script〉部分不能做任何改动。对于〈DIV〉我们可以做任意的修改和调整，或者在其中插入一些主页元素。只要注意 id=′dropKBDRAG′部分不要弄错！ <br><br>　　这样，你就可以像在Windows桌面拖动一个窗口一样拖动你主页中这个层了！ <br><br><br><br><br>（作者：王超　2000年03月17日 14:31）<br>__________________<br><font color=red>真实源于生活！ </font><br>请访问我们的网站： <br>（VB爱好者乐园） <br><a href="http://www.vbgood.com" target=_blank>http://www.vbgood.com</a><br><a href="http://www.d1vb.com" target=_blank>http://www.d1vb.com</a><br><a href="http://61.128.97.225/vbgood/index.asp" target=_blank>http://61.128.97.225/vbgood/index.asp</a><br>拥有1800多个资料！ </p></td>
  </tr>
</table>

<p>
<CENTER><a href="http://www.jsp001.com/forum/newreply.php?action=newreply&threadid=509">点这里对该文章发表评论</a></CENTER>
<p>该文章总得分是 <font color=red>0</font> 分，你认为它对你有帮助吗？
				[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=509&intVote=4","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>非常多</a>](<font color=red>0</font>) 
				[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=509&intVote=2","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>有一些</a>](<font color=red>0</font>) 
				[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=509&intVote=1","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>无帮助</a>](<font color=red>0</font>) 
				[<a href=javascript:void(0) onclick=window.open("http://www.jsp001.com/forum/codeVote.php?threadid=509&intVote=-1","","menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=no,scrollbars=no,width=70,height=40,top=0,left=0")>是灌水</a>](<font color=red>0</font>) </p>
<script language="javascript" src="http://www.jsp001.com/include/read_thread_script.php?threadid=509"></script>
<p><CENTER>
Copyright &copy; 2001 - 2009 JSP001.com . All Rights Reserved <P>

<IMG SRC="../image/jsp001_small_logo.gif" WIDTH="85" HEIGHT="30" BORDER=0 ALT="">
</CENTER></p>

</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -