从某控件中，提取的Javascript鼠标划过链接时弹出窗口。直接看代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
2 <HTML>
3 <HEAD>
4 <title>MouseOverPopWindowDemo</title>
5 <script language="javascript">
6 <!--
7 //代码整理:Melodicsoul http://wintersun.cnblogs.com
8 //2007年5月21日
9 var FADINGTOOLTIP
10 var wnd_height, wnd_width;
11 var tooltip_height, tooltip_width;
12 var tooltip_shown=false;
13 var transparency = 100;
14 var timer_id = 1;
15
16 // override events
17 window.onload = WindowLoading;
18 window.onresize = UpdateWindowSize;
19 document.onmousemove = AdjustToolTipPosition;
20
21 setTimeout('window.location.reload(true)', 1140000); // 19 minutes
22
23 function DisplayTooltip(tooltip_text)
24 {
25 if (FADINGTOOLTIP) {
26 FADINGTOOLTIP.innerHTML = tooltip_text;
27 tooltip_shown = (tooltip_text != "")? true : false;
28 if(tooltip_text != "")
29 {
30 // Get tooltip window height
31 tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
32 transparency=0;
33 ToolTipFading();
34 }
35 else
36 {
37 clearTimeout(timer_id);
38 FADINGTOOLTIP.style.visibility="hidden";
39 }
40 }
41 }
42
43 function AdjustToolTipPosition(e)
44 {
45 if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
46 e = event;
47 if( tooltip_shown )
48 {
49 offset_y = 20;//(e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
50 FADINGTOOLTIP.style.visibility = "visible";
51 FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10 , Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
52 FADINGTOOLTIP.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
53 }
54 }
55
56 function WindowLoading()
57 {
58 FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');
59
60 // Get tooltip window width
61 tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;
62
63 // Get tooltip window height
64 tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
65
66 FADINGTOOLTIP.style.left = 0;
67 FADINGTOOLTIP.style.top = 0;
68
69 UpdateWindowSize();
70 }
71
72 function ToolTipFading()
73 {
74 if(transparency <= 100)
75 {
76 FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
77 transparency += 10;
78 timer_id = setTimeout('ToolTipFading()', 10);
79 }
80 }
81
82 function UpdateWindowSize()
83 {
84 wnd_height=document.body.clientHeight;
85 wnd_width=document.body.clientWidth;
86 }
87 -->
88 </script>
89 </HEAD>
90 <body>
91 <form name="Form1">
92 <DIV id="mainPane">
93 <a href="http://wintersun.cnblogs.com" onmouseover="DisplayTooltip('<iframe src=http://wintersun.cnblogs.com width=100% height=300px scrolling=no></iframe>');" onmouseout="DisplayTooltip('');">鼠标划过</a>
94 </DIV>
95 <div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 103; LEFT: 16px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: 478px; HEIGHT: 30px">
96 </div>
97 </form>
98 </body>
99 </html>
100
101
2 <HTML>
3 <HEAD>
4 <title>MouseOverPopWindowDemo</title>
5 <script language="javascript">
6 <!--
7 //代码整理:Melodicsoul http://wintersun.cnblogs.com
8 //2007年5月21日
9 var FADINGTOOLTIP
10 var wnd_height, wnd_width;
11 var tooltip_height, tooltip_width;
12 var tooltip_shown=false;
13 var transparency = 100;
14 var timer_id = 1;
15
16 // override events
17 window.onload = WindowLoading;
18 window.onresize = UpdateWindowSize;
19 document.onmousemove = AdjustToolTipPosition;
20
21 setTimeout('window.location.reload(true)', 1140000); // 19 minutes
22
23 function DisplayTooltip(tooltip_text)
24 {
25 if (FADINGTOOLTIP) {
26 FADINGTOOLTIP.innerHTML = tooltip_text;
27 tooltip_shown = (tooltip_text != "")? true : false;
28 if(tooltip_text != "")
29 {
30 // Get tooltip window height
31 tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
32 transparency=0;
33 ToolTipFading();
34 }
35 else
36 {
37 clearTimeout(timer_id);
38 FADINGTOOLTIP.style.visibility="hidden";
39 }
40 }
41 }
42
43 function AdjustToolTipPosition(e)
44 {
45 if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
46 e = event;
47 if( tooltip_shown )
48 {
49 offset_y = 20;//(e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
50 FADINGTOOLTIP.style.visibility = "visible";
51 FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10 , Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
52 FADINGTOOLTIP.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
53 }
54 }
55
56 function WindowLoading()
57 {
58 FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');
59
60 // Get tooltip window width
61 tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;
62
63 // Get tooltip window height
64 tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
65
66 FADINGTOOLTIP.style.left = 0;
67 FADINGTOOLTIP.style.top = 0;
68
69 UpdateWindowSize();
70 }
71
72 function ToolTipFading()
73 {
74 if(transparency <= 100)
75 {
76 FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
77 transparency += 10;
78 timer_id = setTimeout('ToolTipFading()', 10);
79 }
80 }
81
82 function UpdateWindowSize()
83 {
84 wnd_height=document.body.clientHeight;
85 wnd_width=document.body.clientWidth;
86 }
87 -->
88 </script>
89 </HEAD>
90 <body>
91 <form name="Form1">
92 <DIV id="mainPane">
93 <a href="http://wintersun.cnblogs.com" onmouseover="DisplayTooltip('<iframe src=http://wintersun.cnblogs.com width=100% height=300px scrolling=no></iframe>');" onmouseout="DisplayTooltip('');">鼠标划过</a>
94 </DIV>
95 <div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 103; LEFT: 16px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: 478px; HEIGHT: 30px">
96 </div>
97 </form>
98 </body>
99 </html>
100
101
