1. //test.html 
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <script language="javascript" src="a.js"></script> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  7. <title>无标题文档</title> 
  8. <style type="text/css"> 
  9.  *{font:normal 14px/150% '宋体'} 
  10.  a:link, a:visited{color:#00f; text-decoration:none} 
  11.  a:hover, a:active{color:#f00; text-decoration:underline} 
  12. </style> 
  13. </head> 
  14. <body> 
  15.  <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 /> 
  16.  <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 /> 
  17.  <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 /> 
  18.  <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 /> 
  19.  <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 /> 
  20.  <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 /> 
  21. </body> 
  22. </html> 

 

 

  1. a.js 
  2. function wsug(e, str){ // http://www.hansir.cn 
  3.  var oThis = arguments.callee; 
  4.  if(!str) { 
  5.   oThis.sug.style.visibility = 'hidden'; 
  6.   document.onmousemove = null; 
  7.   return; 
  8.  }   
  9.  if(!oThis.sug){ 
  10.   var div = document.createElement('div'), css = 'top:0; left:0; position:absolute; z-index:100; visibility:hidden'; 
  11.    div.style.cssText = css; 
  12.    div.setAttribute('style',css); 
  13.   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'; 
  14.    sug.style.cssText = css; 
  15.    sug.setAttribute('style',css); 
  16.   var dr = document.createElement('div'), css = 'position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9'; 
  17.    dr.style.cssText = css; 
  18.    dr.setAttribute('style',css); 
  19.   var ifr = document.createElement('iframe'), css='position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0'; 
  20.    ifr.style.cssText = css; 
  21.    ifr.setAttribute('style',css); 
  22.   div.appendChild(ifr); 
  23.   div.appendChild(dr); 
  24.   div.appendChild(sug); 
  25.   div.sug = sug; 
  26.   document.body.appendChild(div); 
  27.   oThis.sug = div; 
  28.   oThis.dr = dr; 
  29.   oThis.ifr = ifr; 
  30.   div = dr = ifr = sug = null; 
  31.  } 
  32.  var ee = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr; 
  33.  obj.sug.innerHTML = str; 
  34.   
  35.  var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth||document.body.clientWidth; dh = document.documentElement.clientHeight || document.body.clientHeight; 
  36.  var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; 
  37.  var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st + 17; 
  38.  obj.style.left = left+ 10 + 'px'; 
  39.  obj.style.top = top + 10 + 'px'; 
  40.  dr.style.width = w + 'px'; 
  41.  dr.style.height = h + 'px'; 
  42.  ifr.style.width = w + 3 + 'px'; 
  43.  ifr.style.height = h + 3 + 'px'; 
  44.  obj.style.visibility = 'visible'; 
  45.  document.onmousemove = function(e){ 
  46.   var ee = e || window.event, st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; 
  47.   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; 
  48.   obj.style.left = left + 'px'; 
  49.   obj.style.top = top + 'px'; 
  50.  } 
  51. } 

 

鼠标跟随提示效果_效果