2009-12-01

鼠标移动到文本上弹出可移动可关闭窗口层的代码

Posted in JavaScript at 21:18 Author:仲远 浏览量: 2,854

标签:

网页在JavaScript的配合下，可以做出许多特效。最近，由于项目需要，我就研究实现了一个特效：但鼠标移动到一段文本上的时候，弹出一个类似于对话框的窗口（实际上是DIV弹出层），用户可以移动这个弹出窗口层，也可以关闭这个弹出窗口层，当然，还可以对弹出窗口层中的内容做一些点击处理等操作。

以下是代码实现的效果图：
弹出窗口层
鼠标移动到文本上弹出层的在线效果演示网址为：http://www.wangzhongyuan.com/static/pop.html

鼠标移动到文本上弹出可移动可关闭窗口层的代码如下：

  1. <script language=javascript> 
  2. <!--
  3. var IE5=(document.getElementById && document.all)? true : false;
  4. var W3C=(document.getElementById)? true: false;
  5. var currID=null, preID=null; xoff=0, yoff=0; zctr=0; totz=0;
  6.  
  7. function trackmouse(evt){
  8.    
  9.     if((currID!=null)){
  10.         var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;
  11.         var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;
  12.         currID.style.left=x+xoff+'px';
  13.         currID.style.top=y+yoff+'px';
  14.         return false;
  15.     }
  16. }
  17.  
  18. function stopdrag(){
  19.     currID=null;
  20.     NS6bugfix();
  21. }
  22.  
  23. function grab_id(evt){
  24.     xoff=parseInt(evt.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);
  25.     yoff=parseInt(evt.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);
  26.     currID=evt;
  27.  
  28. }
  29.  
  30. function NS6bugfix(){
  31.     if(!IE5){
  32.     self.resizeBy(0,1);
  33.     self.resizeBy(0,-1);
  34.     }
  35. }
  36.  
  37. if(W3C)document.onmousemove=trackmouse;
  38. if(W3C)document.onmouseup=stopdrag;
  39. if(!IE5 && W3C)window.onload=NS6bugfix;
  40.  
  41.  
  42. function hiddiv(blah)
  43. {
  44.     blah.style.display="none";
  45. }
  46. function showdiv(blah)
  47. {
  48.     blah.style.display="block";
  49.     blah.style.left=window.event.clientX;
  50.     blah.style.top=window.event.clientY;
  51.    
  52.     if(preID!=null&&preID!=blah)
  53.     {
  54.         preID.style.display="none";
  55.     }
  56.     preID = blah;
  57.    
  58. }
  59. //--> 
  60.  
  61. </script> 
  62.  
  63. <style>
  64. .msgBoxDiv
  65. {
  66.     position: absolute;
  67.     z-index: 2;
  68.     left: expression((body.clientWidth-320)/2-60);
  69.     top: expression((body.clientHeight-330)/2+132);
  70.     width: 320px;
  71.     height: 330px;
  72.     filter: dropshadow(color=#666666,offx=3,offy=3,positive=2);
  73.     display:none;
  74. }
  75. </style>
  76.  
  77.  
  78.  
  79. <div id="msgBox" class="msgBoxDiv">
  80.     <div style="border: #036 solid; border-width: 1 1 3 1; width: 320px; height: 330px;background: #fff; color: #036; font-size: 15px; line-height: 140%;">
  81.         <div style="background: #036; height: 8%; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px; padding: 3 5 0 0; color: #fff;text-align: center;" onmousedown="grab_id(msgBox);" onmouseup="stopdrag();">
  82.             <div style="display: inline; width: 300px; float: left; text-align: center; height: 30px;line-height:30px;cursor:move">仲子说</div>
  83.             <div onclick="msgBox.style.display='none';" style="float: left; display: inline; cursor: hand;height: 30px; line-height: 30px;" >×</div>
  84.         </div> 
  85.         <div align='center'><br /><a href="http://www.wangzhongyuan.com">仲子说的网址是：http://www.wangzhongyuan.com</a><br /><br />仲子说是我的个人网站，主要发表我的文章以及一些技术心得，欢迎大家常来看看:)
  86. </div>
  87.     </div>
  88. </div>
  89.  
  90.  
  91.  
  92. <div id="msgBox1" class="msgBoxDiv">
  93.     <div style="border: #036 solid; border-width: 1 1 3 1; width: 320px; height: 330px;background: #fff; color: #036; font-size: 15px; line-height: 140%;">
  94.         <div style="background: #036; height: 8%; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 18px; padding: 3 5 0 0; color: #fff;text-align: center;" onmousedown="grab_id(msgBox1);" onmouseup="stopdrag();">
  95.             <div style="display: inline; width: 300px; float: left; text-align: center; height: 30px;line-height:30px;cursor:move">论语</div>
  96.             <div onclick="msgBox1.style.display='none';" style="float: left; display: inline; cursor: hand;height: 30px; line-height: 30px;" >×</div>
  97.         </div> 
  98.         <div align='center'><br /><a href="http://www.wangzhongyuan.com">曾子曰：“吾日三省吾身；为人谋而不忠乎？与朋友交而不信乎？传不习乎？”</a></div>
  99.     </div>
  100. </div>
  101.  
  102.  
  103.  
  104. <table border="0" cellpadding="0" cellspacing="0" width="600"> 
  105. <tr> 
  106. <td align="center"><a href="#" onmouseover=showdiv(msgBox);>仲子说</a></td> 
  107. </tr> 
  108. <tr><td>&nbsp;</td></tr>
  109. <tr> 
  110. <td align="center"><a href="#" onmousemove=showdiv(msgBox1);>孔子说</a></td> 
  111. </tr>
  112. <tr><td>&nbsp;</td></tr>
  113. <tr>
  114. <td align="center">本代码来自<a href="http://www.wangzhongyuan.com" target="_blank">仲子说</a>，原文地址为：<a href="http://www.wangzhongyuan.com/archives/763.html" title="鼠标移动到文本上弹出可移动可关闭窗口层的代码" target="_blank">http://www.wangzhongyuan.com/archives/763.html</a></td>
  115. </tr> 
  116. </table>

本文可以自由转载，转载时请保留全文并注明出处：
转载自仲子说 [ http://www.wangzhongyuan.com/ ]
原文链接：

» 上一篇：云数据库发展的几条技术路线
» 下一篇：最近的一些事情

Leave a Comment

*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.
Click to hear an audio file of the anti-spam word