鼠标跟随提示效果

 
 
  1. //test.html
  2. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <scriptlanguage="javascript"src="a.js"></script>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  7. <title>无标题文档</title>
  8. <styletype="text/css">
  9. *{font:normal14px/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. <ahref="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. <ahref="http://bbs.blueidea.com"onmouseover="wsug(event,'【经典论坛】http://bbs.blueidea.com')"onmouseout="wsug(event,0)"target="_blank">http://bbs.blueidea.com</a><br/>
  17. <ahref="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. <ahref="http://bbs.blueidea.com"onmouseover="wsug(event,'【经典论坛】http://bbs.blueidea.com')"onmouseout="wsug(event,0)"target="_blank">http://bbs.blueidea.com</a><br/>
  19. <ahref="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. <ahref="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. functionwsug(e,str){//http://www.hansir.cn
  3. varoThis=arguments.callee;
  4. if(!str){
  5. oThis.sug.style.visibility='hidden';
  6. document.onmousemove=null;
  7. return;
  8. }
  9. if(!oThis.sug){
  10. vardiv=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. varsug=document.createElement('div'),css='font:normal12px/16px"宋体";white-space:nowrap;color:#666;padding:3px;position:absolute;left:0;top:0;z-index:10;background:#f9fdfd;border:1pxsolid#0aa';
  14. sug.style.cssText=css;
  15. sug.setAttribute('style',css);
  16. vardr=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. varifr=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. varee=e||window.event,obj=oThis.sug,dr=oThis.dr,ifr=oThis.ifr;
  33. obj.sug.innerHTML=str;
  34. varw=obj.sug.offsetWidth,h=obj.sug.offsetHeight,dw=document.documentElement.clientWidth||document.body.clientWidth;dh=document.documentElement.clientHeight||document.body.clientHeight;
  35. varst=document.documentElement.scrollTop||document.body.scrollTop,sl=document.documentElement.scrollLeft||document.body.scrollLeft;
  36. varleft=e.clientX+sl+17+w<dw+sl&&e.clientX+sl+15||e.clientX+sl-8-w,top=e.clientY+st+17;
  37. obj.style.left=left+10+'px';
  38. obj.style.top=top+10+'px';
  39. dr.style.width=w+'px';
  40. dr.style.height=h+'px';
  41. ifr.style.width=w+3+'px';
  42. ifr.style.height=h+3+'px';
  43. obj.style.visibility='visible';
  44. document.onmousemove=function(e){
  45. varee=e||window.event,st=document.documentElement.scrollTop||document.body.scrollTop,sl=document.documentElement.scrollLeft||document.body.scrollLeft;
  46. varleft=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;
  47. obj.style.left=left+'px';
  48. obj.style.top=top+'px';
  49. }
  50. }

鼠标跟随提示效果

你可能感兴趣的:(提示)