从某控件中,提取的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