- //test.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script language="javascript" src="a.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>无标题文档</title>
- <style type="text/css">
- *{font:normal 14px/150% '宋体'}
- a:link, a:visited{color:#00f; text-decoration:none}
- a:hover, a:active{color:#f00; text-decoration:underline}
- </style>
- </head>
- <body>
- <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
- <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
- <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
- <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
- <a href="http://www.hansir.cn" onmouseover="wsug(event, '【我的博客】http://www.hansir.cn<br />http://www.hansir.cn/blog')" onmouseout="wsug(event, 0)" target="_blank">http://www.hansir.cn</a><br />
- <a href="http://bbs.blueidea.com" onmouseover="wsug(event, '【经典论坛】http://bbs.blueidea.com')" onmouseout="wsug(event, 0)" target="_blank">http://bbs.blueidea.com</a><br />
- </body>
- </html>
- a.js
- function wsug(e, str){ // http://www.hansir.cn
- var oThis = arguments.callee;
- if(!str) {
- oThis.sug.style.visibility = 'hidden';
- document.onmousemove = null;
- return;
- }
- if(!oThis.sug){
- var div = document.createElement('div'), css = 'top:0; left:0; position:absolute; z-index:100; visibility:hidden';
- div.style.cssText = css;
- div.setAttribute('style',css);
- var sug = document.createElement('div'), css= 'font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa';
- sug.style.cssText = css;
- sug.setAttribute('style',css);
- var dr = document.createElement('div'), css = 'position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9';
- dr.style.cssText = css;
- dr.setAttribute('style',css);
- var ifr = document.createElement('iframe'), css='position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0';
- ifr.style.cssText = css;
- ifr.setAttribute('style',css);
- div.appendChild(ifr);
- div.appendChild(dr);
- div.appendChild(sug);
- div.sug = sug;
- document.body.appendChild(div);
- oThis.sug = div;
- oThis.dr = dr;
- oThis.ifr = ifr;
- div = dr = ifr = sug = null;
- }
- var ee = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr;
- obj.sug.innerHTML = str;
- var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth||document.body.clientWidth; dh = document.documentElement.clientHeight || document.body.clientHeight;
- var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft;
- var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st + 17;
- obj.style.left = left+ 10 + 'px';
- obj.style.top = top + 10 + 'px';
- dr.style.width = w + 'px';
- dr.style.height = h + 'px';
- ifr.style.width = w + 3 + 'px';
- ifr.style.height = h + 3 + 'px';
- obj.style.visibility = 'visible';
- document.onmousemove = function(e){
- var ee = e || window.event, st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft;
- var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h;
- obj.style.left = left + 'px';
- obj.style.top = top + 'px';
- }
- }
