自定义Html的Title标签显示时间

最新推荐文章于 2022-09-14 11:31:37 发布

bluet2001

最新推荐文章于 2022-09-14 11:31:37 发布

阅读量7.2k

点赞数

分类专栏： .Net开发文章标签： html null border 测试浏览器 class

本文链接：https://blog.csdn.net/bluet2001/article/details/2885883

版权

.Net开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Html代码中对每个标签都有Title属性，鼠标放到这个标签上的时候会出来相应的文字，但这个Title显示时间、关闭时间都无法自己控制，有的时候不得不写一个Div，再加上Onmouseover和Onmouseout事件来代替Title，很是麻烦。于是网上搜集了一下资料，自己写了一个可以自定义显示时间的Title，并且Title中还可以插入img标签来显示图片, 贴出来供大家分享。（只测试对IE有效，对其他浏览器没有测试）

将以代码保存为myTitle.js

 
 //***********默认设置定义.********************* 
tPopWait=50;//停留tWait豪秒后显示提示。 
tPopShow=500000;//显示tShow豪秒后关闭提示 
showPopStep=20;
popOpacity=99;
//***************内部变量定义***************** 
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0; 
}
else {
if(o.dyclass!=null) popStyle=o.dyclass 
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
//此处设置Title显示的位置 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.οnmοuseοver=showPopupText;
function CheckAll(form) {
for (var i=0;i<form.elements.length;i++) {
var e = form.elements[i];
if (e.name != 'chkall') e.checked = form.chkall.checked; 
}
}
 

网页中引用代码，其实就和正常的网页一样，只不过引用了刚才那个JS文件而已

 
 <html>
<head>
<script src="myTitle.js" type="text/javascript"></script>
</head>
<body>
<div title="test<br/><img src='w.jpg' />itasdf">ddsf</div>
</body>
</html>
 

bluet2001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义Html的Title标签显示时间

Html代码中对每个标签都有Title属性，鼠标放到这个标签上的时候会出来相应的文字，但这个Title显示时间、关闭时间都无法自己控制，有的时候不得不写一个Div，再加上Onmouseover和Onmouseout事件来代替Title，很是麻烦。于是网上搜集了一下资料，自己写了一个可以自定义显示时间的Title，并且Title中还可以插入img标签来显示图片, 贴出来供大家分享。（只测试对IE有效
复制链接

扫一扫