您当前的位置: 首页 > 前端教程 > CSS教程 > Div形式的title显示JS代码

Div形式的title显示JS代码

作者:guanchaofeng 来源:本站整理 发布时间: 2009-03-22 20:54 点击:
Div形式的title显示JS代码,把这个JS加到你的项目中,Div形式的title显示JS代码,把这个JS加到你的项目中 var pltsPop=null; var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适 var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离;3

Div形式的title显示JS代码

  Div形式的title显示JS代码,把这个JS加到你的项目中,Div形式的title显示JS代码,把这个JS加到你的项目中·····
  
  var pltsPop=null;
  
  var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
  
  var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离;3-12 合适
  
  var pltsPopbg="#FFFFEE"; //背景色
  
  var pltsPopfg="#111111"; //前景色
  
  var pltsTitle="";
  
  document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
  
  function pltsinits()
  
  {
  
  document.onmouseover = plts;
  
  document.onmousemove = moveToMouseLoc;
  
  }
  
  function plts()
  
  { var o=event.srcElement;
  
  if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
  
  if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  
  pltsPop=o.dypop;
  
  if(pltsPop!=null&&pltsPop!=""&typeof(pltsPop)!="undefined")
  
  {
  
  pltsTipLayer.style.left=-1000;
  
  pltsTipLayer.style.display='';
  
  var Msg=pltsPop.replace(/\n/g,"<br>");
  
  Msg=Msg.replace(/\0x13/g,"<br>");
  
  var re=/\{(.[^\{]*)\}/ig;
  
  if(!re.test(Msg))pltsTitle="<font color=#ffffff>中国移动校讯通欢迎您!</font>";
  
  else{
  
  re=/\{(.[^\{]*)\}(.*)/ig;
  
  pltsTitle=Msg.replace(re,"$1")+" ";
  
  re=/\{(.[^\{]*)\}/ig;
  
  Msg=Msg.replace(re,"");
  
  Msg=Msg.replace("<br>","");}
  
  var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
  
  var content =
  
  '<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%">'+
  
  '<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>'+
  
  '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
  
  '<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>'+
  
  '</table></td></tr></table>';
  
  pltsTipLayer.innerHTML=content;
  
  toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
  
  moveToMouseLoc();
  
  return true;
  
  }
  
  else
  
  {
  
  pltsTipLayer.innerHTML='';
  
  pltsTipLayer.style.display='none';
  
  return true;
  
  }
  
  }
  
  function moveToMouseLoc()
  
  {
  
  if(pltsTipLayer.innerHTML=='')return true;
  
  var MouseX=event.x;
  
  var MouseY=event.y;
  
  //window.status=event.y;
  
  var popHeight=pltsTipLayer.clientHeight;
  
  var popWidth=pltsTipLayer.clientWidth;
  
  if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
  
  {
  
  popTopAdjust=-popHeight-pltsoffsetY*1.5;
  
  pltsPoptop.style.display="none";
  
  pltsPopbot.style.display="";
  
  }
  
  else
  
  {
  
  popTopAdjust=0;
  
  pltsPoptop.style.display="";
  
  pltsPopbot.style.display="none";
  
  }
  
  if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
  
  {
  
  popLeftAdjust=-popWidth-pltsoffsetX*2;
  
  topleft.style.display="none";
  
  botleft.style.display="none";
  
  topright.style.display="";
  
  botright.style.display="";
  
  }
  
  else
  
  {
  
  popLeftAdjust=0;
  
  topleft.style.display="";
  
  botleft.style.display="";
  
  topright.style.display="none";
  
  botright.style.display="none";
  
  }
  
  pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
  
  pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
  
  return true;
  
  }
  
  pltsinits();
  
  然后在引用的页面上加上样式,当然你也可以写在CSS里面哈····
  
  <style>
  
  .tableBorder7{width:800;solid; background-color: #000000;}
  
  TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
  
  th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
  
  th.th1{background-color: #333333;}
  
  td.TableBody7{background-color: #B1EA45;}
  
  </style>
  
  搞定····· 

分享到:
本文"Div形式的title显示JS代码"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4