Discuz教程网

漂亮的鼠标提示信息js特效代码

[复制链接]
authicon dong 发表于 2010-10-10 19:08:29 | 显示全部楼层 |阅读模式

  1. <style>
  2. .tableBorder7{width:800;solid; background-color: #000000;}
  3. TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
  4. th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
  5. th.th1{background-color: #333333;}
  6. td.TableBody7{background-color: #B1EA45;}
  7. </style>
  8. <script language="JavaScript">
  9. <!--
  10. var pltsPop=null;
  11. var pltsoffsetX = 10;  // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
  12. var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离;3-12 合适
  13. var pltsPopbg="#FFFFEE"; //背景色
  14. var pltsPopfg="#111111"; //前景色
  15. var pltsTitle="";
  16. document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
  17. function pltsinits()
  18. {
  19.    document.onmouseover  = plts;
  20.    document.onmousemove = moveToMouseLoc;
  21. }
  22. function plts()
  23. { var o=event.srcElement;
  24.    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
  25.    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  26.    pltsPop=o.dypop;
  27.    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
  28.    {
  29.     pltsTipLayer.style.left=-1000;
  30.     pltsTipLayer.style.display='';
  31.     var Msg=pltsPop.replace(/ /g,"<br>");
  32.     Msg=Msg.replace(/ x13/g,"<br>");
  33.     var re=/{(.[^{]*)}/ig;
  34.     if(!re.test(Msg))pltsTitle="<font color=#ffffff>简介</font>";
  35.     else{
  36.      re=/{(.[^{]*)}(.*)/ig;
  37.       pltsTitle=Msg.replace(re,"$1")+" ";
  38.      re=/{(.[^{]*)}/ig;
  39.      Msg=Msg.replace(re,"");
  40.      Msg=Msg.replace("<br>","");}
  41.      //var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
  42.         var content =
  43.        '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
  44.        '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
  45.        '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
  46.        '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</font></b></th></tr>'+
  47.        '</table></td></tr></table>';
  48.         pltsTipLayer.innerHTML=content;
  49.         toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
  50.         moveToMouseLoc();
  51.         return true;
  52.     }
  53.    else
  54.    {
  55.       pltsTipLayer.innerHTML='';
  56.        pltsTipLayer.style.display='none';
  57.         return true;
  58.    }
  59. }
  60. function moveToMouseLoc()
  61. {
  62.     if(pltsTipLayer.innerHTML=='')return true;
  63.     var MouseX=event.x;
  64.     var MouseY=event.y;
  65.     //window.status=event.y;
  66.     var popHeight=pltsTipLayer.clientHeight;
  67.     var popWidth=pltsTipLayer.clientWidth;
  68.     if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
  69.     {
  70.          popTopAdjust=-popHeight-pltsoffsetY*1.5;
  71.          pltsPoptop.style.display="none";
  72.          pltsPopbot.style.display="";
  73.     }
  74.      else
  75.     {
  76.          popTopAdjust=0;
  77.          pltsPoptop.style.display="";
  78.          pltsPopbot.style.display="none";
  79.     }
  80.     if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
  81.     {
  82.         popLeftAdjust=-popWidth-pltsoffsetX*2;
  83.         topleft.style.display="none";
  84.         botleft.style.display="none";
  85.         topright.style.display="";
  86.         botright.style.display="";
  87.     }
  88.     else
  89.     {
  90.         popLeftAdjust=0;
  91.         topleft.style.display="";
  92.         botleft.style.display="";
  93.         topright.style.display="none";
  94.         botright.style.display="none";
  95.     }
  96.     pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
  97.     pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
  98.      return true;
  99. }
  100. pltsinits();
  101. //-->
  102. </script>
  103. </HEAD>
  104. <BODY>
  105. <div title="中国领先的学习交流网站">1314学习网([url]www.discuz.1314study.com[/url])</div>
  106. </BODY>
  107. </HTML>
复制代码




上一篇:最新Javascript 方法大全
下一篇:傻瓜型的ASP服务器软件
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-6-18 09:03

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表