javascript 弹出层

最新推荐文章于 2023-09-15 14:36:47 发布

如生

最新推荐文章于 2023-09-15 14:36:47 发布

阅读量866

点赞数

文章标签： javascript header stylesheet

本文链接：https://blog.csdn.net/lql876381722/article/details/3615470

版权

 
 var xPos;
var yPos;
function showToolTip(title,msg,evt){
    if (evt) {
        var url = evt.target;
    }
    else {
        evt = window.event;
        var url = evt.srcElement;
    }
    xPos = evt.clientX;
    yPos = evt.clientY;
   var toolTip = document.getElementById("toolTip");
   toolTip.innerHTML = "<h1>"+title+"</h1><p>"+msg+"</p>";
   toolTip.style.top = parseInt(yPos)+2 + "px";
   toolTip.style.left = parseInt(xPos)+2 + "px";
   toolTip.style.visibility = "visible";
   
}
function hideToolTip(){
   var toolTip = document.getElementById("toolTip");
   toolTip.style.visibility = "hidden";
}
 

网页代码

-------------------------------------------------------------------------------------------------------------------------------------------------------

 
 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示DEMO：JavaScrip浮动提示Tooltip效果</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tooltip.js"></script>
</head>
<body>
<div id="toolTip"> </div>
<div id="container">
    <div id="header"><div id="header_left"></div>
    <div id="header_main">JavaScrip浮动提示Tooltip效果</div><div id="header_right"></div></div>
    <div id="content">
        <table>
           <tr><td colspan="2">你可以给任意<a href="#" οnmοuseοver="showToolTip('链接提示','这是一个链接提示效果。',event);" οnmοuseοut="hideToolTip();">链接</a>和几乎所有元素添加浮动提示Tooltip效果。 <br/><br/></td>
           <tr>
              <td οnmοuseοver="showToolTip('姓名','请在此输入姓名',event);" οnmοuseοut="hideToolTip();">姓名:</td>
              <td><input type="text" name="name" /></td>     
           </tr>
        </table><br/><br/>
    </div>
    <div id="footer"><a href="http://www.code52.net/page/JS/js200811_17_177.html" target="_blank">点此查看此Tooltip教程</a></div>
</div>
</body>
</html>
<!--Google Stats-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5724035-1");
pageTracker._trackPageview();
</script>
 

如生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 弹出层

var xPos;var yPos;function showToolTip(title,msg,evt){ if (evt) { var url = evt.target; } else { evt = window.event; var url = evt.srcElement;
复制链接

扫一扫