终极目标

——永远的博客

导航

MSN消息弹出框

Posted on 2007-01-24 11:44  Eric  阅读(414)  评论(0编辑  收藏  举报
  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3<head>
  4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5<title>无标题文档</title>
  6<script type="text/javascript">
  7
  8var _message=null;
  9var _hylinkContent=null;
 10
 11function showMessage()
 12{
 13    var divMess= document.getElementById("divMessage");
 14    var e=divMess;
 15    var t=e.offsetTop;
 16    var l=e.offsetLeft;
 17    while(e=e.offsetParent){
 18    t+=e.offsetTop;
 19    l+=e.offsetLeft;
 20    }

 21    var locX=    document.documentElement.scrollLeft + document.documentElement.clientWidth-divMess.offsetWidth;
 22    
 23    /*var topLoc=document.documentElement.scrollTop+document.documentElement.clientHeight-divMess.offsetHeight;
 24    if(divMess.style.visibility=='visible')
 25    {
 26        divMess.style.top=topLoc;
 27        divMess.style.left=locX;
 28        return ;
 29    }*/

 30    
 31    divMess.style.left=locX;
 32    
 33    divMess.style.visibility='visible';
 34    var s="<a href='"+_hylinkContent+"'  target='_blank'  >"+_message+"</a>";
 35    
 36    moveShow(document.documentElement.scrollTop+document.documentElement.clientHeight,s);
 37}

 38function moveShow(locY,message)
 39{
 40    var divMess= document.getElementById("divMessage");
 41    var topLoc=document.documentElement.scrollTop+document.documentElement.clientHeight-divMess.offsetHeight;
 42    if(locY<topLoc)return ;
 43    
 44    divMess.style.top=locY;
 45    var cc=document.getElementById("divContent");
 46    
 47    cc.innerHTML=message;
 48    
 49    locY-=7;
 50    setTimeout("moveShow("+locY+",\""+message+"\");",50);
 51}

 52
 53
 54function loadMessage()
 55{
 56    if(_message!="")
 57    showMessage();
 58}

 59
 60function fixedMessage()
 61{
 62    var divMess= document.getElementById("divMessage");
 63    if(divMess.style.visibility=='visible')
 64    {
 65    
 66        var locX=    document.documentElement.scrollLeft + document.documentElement.clientWidth-divMess.offsetWidth;
 67        var topLoc=document.documentElement.scrollTop+document.documentElement.clientHeight-divMess.offsetHeight;
 68        divMess.style.top=topLoc;
 69        divMess.style.left=locX;
 70    
 71    }

 72    
 73}

 74
 75
</script>
 76<style type="text/css">
 77<!--
 78#divMessage {
 79    position:absolute;
 80    left:126px;
 81    top:69px;
 82    width:233px;
 83    height:140px;
 84    z-index:1;
 85    
 86}

 87.messageStyle {color: #FF0000;
 88    border-width:2px;
 89    border-style:solid;
 90    border-color: #6699CC;
 91    borborder-collapse:collape;
 92}

 93-->
 94
</style>
 95<script type="text/javascript" >
 96
 97_message='first of all';
 98_hylinkContent="";
 99
100
</script>
101</head>
102
103<body   >
104<script type="text/javascript" >
105window.onload=loadMessage;
106window.onscroll=fixedMessage;
107window.onresize=fixedMessage;
108
</script>
109
110<div class="messageStyle" id="divMessage">
111  <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6AFFE1" style=" height:100%; " >
112    <tr >
113      <td align="right" bgcolor="#3366CC" style="height:15%;"><href="#" onclick="divMessage.style.visibility='hidden';"><span style="color:red;font-weight:big">×</span></a></td>
114    </tr>
115    <tr>
116      <td align="center" valign="middle" bgcolor="#84E0FF" style="height:85%;" id="divContent" >&nbsp;</td>
117    </tr>
118  
119  </table>
120</div>
121
122<table width="100%" border="0" cellspacing="3" cellpadding="3">
123  <tr>
124    <td>&nbsp;</td>
125  </tr>
126  <tr>
127    <td>&nbsp;</td>
128  </tr>
129  <tr>
130    <td>&nbsp;</td>
131  </tr>
132  <tr>
133    <td>&nbsp;</td>
134  </tr>
135  <tr>
136    <td>&nbsp;</td>
137  </tr>
138  <tr>
139    <td>&nbsp;</td>
140  </tr>
141  <tr>
142    <td>&nbsp;</td>
143  </tr>
144  <tr>
145    <td>&nbsp;</td>
146  </tr>
147  <tr>
148    <td>&nbsp;</td>
149  </tr>
150  <tr>
151    <td>&nbsp;</td>
152  </tr>
153  <tr>
154    <td>&nbsp;</td>
155  </tr>
156  <tr>
157    <td>&nbsp;</td>
158  </tr>
159  <tr>
160    <td>&nbsp;</td>
161  </tr>
162  <tr>
163    <td>&nbsp;</td>
164  </tr>
165  <tr>
166    <td>&nbsp;</td>
167  </tr>
168  <tr>
169    <td>&nbsp;</td>
170  </tr>
171  <tr>
172    <td>&nbsp;</td>
173  </tr>
174  <tr>
175    <td>&nbsp;</td>
176  </tr>
177  <tr>
178    <td>&nbsp;</td>
179  </tr>
180  <tr>
181    <td>&nbsp;</td>
182  </tr>
183  <tr>
184    <td>&nbsp;</td>
185  </tr>
186  <tr>
187    <td>&nbsp;</td>
188  </tr>
189  <tr>
190    <td>&nbsp;</td>
191  </tr>
192  <tr>
193    <td>&nbsp;</td>
194  </tr>
195  <tr>
196    <td>&nbsp;</td>
197  </tr>
198  <tr>
199    <td>&nbsp;</td>
200  </tr>
201  <tr>
202    <td>&nbsp;</td>
203  </tr>
204  <tr>
205    <td>&nbsp;</td>
206  </tr>
207  <tr>
208    <td>&nbsp;</td>
209  </tr>
210  <tr>
211    <td>&nbsp;</td>
212  </tr>
213  <tr>
214    <td>&nbsp;</td>
215  </tr>
216  <tr>
217    <td>&nbsp;</td>
218  </tr>
219  <tr>
220    <td>&nbsp;</td>
221  </tr>
222  <tr>
223    <td>&nbsp;</td>
224  </tr>
225  <tr>
226    <td>&nbsp;</td>
227  </tr>
228  <tr>
229    <td>&nbsp;</td>
230  </tr>
231  <tr>
232    <td>&nbsp;</td>
233  </tr>
234  <tr>
235    <td>&nbsp;</td>
236  </tr>
237  <tr>
238    <td>&nbsp;</td>
239  </tr>
240  <tr>
241    <td>&nbsp;</td>
242  </tr>
243  <tr>
244    <td>&nbsp;</td>
245  </tr>
246  <tr>
247    <td>&nbsp;</td>
248  </tr>
249  <tr>
250    <td>&nbsp;</td>
251  </tr>
252  <tr>
253    <td>&nbsp;</td>
254  </tr>
255  <tr>
256    <td>&nbsp;</td>
257  </tr>
258  <tr>
259    <td>&nbsp;</td>
260  </tr>
261  <tr>
262    <td>&nbsp;</td>
263  </tr>
264  <tr>
265    <td>&nbsp;</td>
266  </tr>
267  <tr>
268    <td>&nbsp;</td>
269  </tr>
270  <tr>
271    <td>&nbsp;</td>
272  </tr>
273  <tr>
274    <td>&nbsp;</td>
275  </tr>
276  <tr>
277    <td>&nbsp;</td>
278  </tr>
279  <tr>
280    <td>&nbsp;</td>
281  </tr>
282  <tr>
283    <td>&nbsp;</td>
284  </tr>
285  <tr>
286    <td>&nbsp;</td>
287  </tr>
288  <tr>
289    <td>&nbsp;</td>
290  </tr>
291  <tr>
292    <td>&nbsp;</td>
293  </tr>
294  <tr>
295    <td>&nbsp;</td>
296  </tr>
297  <tr>
298    <td>&nbsp;</td>
299  </tr>
300  <tr>
301    <td>&nbsp;</td>
302  </tr>
303</table>
304</body>
305</html>
306