js 实现超级链接 title 属性显示效果

发布时间：2018-10-21 13:17:15 所属栏目：PHP教程来源：站长网

导读：一款链接提示效果，应用于Title标签，欢迎大家指正，可能用起来比较麻烦，不过效果非常不错，熟练的话会觉得用起来很方便哦。网页效果：点击这里运行效果： !DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/D

　　一款链接提示效果，应用于Title标签，欢迎大家指正，可能用起来比较麻烦，不过效果非常不错，熟练的话会觉得用起来很方便哦。

　　网页效果：点击这里

　　运行效果：

<!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=gbk"> <title>Title链接提示效果 - Liehuo.Net</title> <script type="text/javascript"> function div(id){return document.getElementById(id);} var ie=!-[1,]; var Obj={ Create:function(id,id2,ele){ var obj=document.createElement(ele); obj.setAttribute("id",id2); div(id).appendChild(obj); }, del:function(id){ var obj=div(id); obj.parentNode.removeChild(obj); }, inner:function(id,text){ div(id).innerHTML=text; }, css:function(){ this.cssinfo(); var obj=div(this.css.id); with(obj.style){ ie?(this.css.float!=undefined?styleFloat=this.css.float:""):(this.css.float!=undefined?cssFloat=this.css.float:""); this.css.background!=undefined?background=this.css.background:""; this.css.width!=undefined?width=this.css.width:""; this.css.height!=undefined?height=this.css.height:""; this.css.position!=undefined?position=this.css.position:""; this.css.left!=undefined?left=this.css.left:""; this.css.top!=undefined?top=this.css.top:""; this.css.bottom!=undefined?bottom=this.css.bottom:""; this.css.padding!=undefined?padding=this.css.padding:""; this.css.margin!=undefined?margin=this.css.margin:""; this.css.filter!=undefined?filter=this.css.filter:""; this.css.opacity!=undefined?opacity=this.css.opacity:""; this.css.zIndex!=undefined?zIndex=this.css.zIndex:""; this.css.border!=undefined?border=this.css.border:""; this.css.overflow!=undefined?overflow=this.css.overflow:""; this.css.display!=undefined?display=this.css.display:""; this.css.textAlign!=undefined?textAlign=this.css.textAlign:""; this.css.fontSize!=undefined?fontSize=this.css.fontSize:""; this.css.color!=undefined?color=this.css.color:""; this.css.verticalAlign!=undefined?verticalAlign=this.css.verticalAlign:""; this.css.cursor!=undefined?cursor=this.css.cursor:""; this.css.lineHeight!=undefined?lineHeight=this.css.lineHeight:""; } }, oEventX:function(e){ var e=window.event?window.event:e; return e.clientX; }, oEventY:function(e){ var e=window.event?window.event:e; return e.clientY; } } var Create=Obj.Create,inner=Obj.inner,del=Obj.del,oX=Obj.oEventX,oY=Obj.oEventY; Obj.css.prototype.cssinfo=function(){ this.css=css; return this; } </script> <style> *{margin:0;padding:0;} body{font-size:12px;background:#fff;font-family:"宋体"} img{border:none;} </style> </head> <body id="body"> <div class="body"> <div style="margin:100px"> <a href="#" title="title:title;anthor:Sunny.Tang;more:详细信息1;" class="titleshow">烈火学院 liehuo.net</a> <a href="#" title="title:title;anthor:Sunny.Tang;more:详细信息2;" class="titleshow">提供IT新闻，网络教程</a> <a href="#" title="title:title;anthor:Sunny.Tang;more:详细信息3;" class="titleshow">教程丰富的网络学院</a> </div> </div> <script> function tshow(){ var eles=document.getElementsByTagName("a"); for(var i=0;i<eles.length;i++){ if(eles[i].className=="titleshow"){ eles[i].onmouseover=function(){ tSite(arguments[0]); tcut(this.title); this.t=this.title; this.title=""; }; eles[i].onmouseout=function(){ del("tShow_wrap"); this.title=this.t; } } } } function tcut(c){ var strs=c.split(";"); for(var i=0;i<strs.length-1;i++){ tStart(strs[i]); } } function tStart(c){ var n1=c.indexOf(":"); var label=c.substring(0,n1),txt=c.slice(n1+1); switch(label){ case "title":this.title=txt;break; case "anthor":this.anthor=txt;break; case "more":this.more=txt;break; } if(this.more!=undefined){ var text="<dl id='tShow_add'>n <dt style='line-height:16px;font-weight:bold;'>"+this.title+"</dt>n <dd>作者："+this.anthor+"</dd>n <dd>详细介绍："+this.more+"</dd>n </dl>"; div("tShow_wrap").innerHTML=text; css={id:"tShow_add",border:"1px solid #85A6E9",background:"#4F4FE5",padding:"4px",color:"#fff",lineHeight:"20px",width:"120px"} new Obj.css; } } function tSite(e){ Create("body","tShow_wrap","div"); css={id:"tShow_wrap",position:"absolute",top:oY(e)-10+"px",left:oX(e)+20+"px"} new Obj.css; } tshow(); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：东莞站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

解析PHP上传自动生成缩	浅谈PHP中用正则表达式
Laravel下怎样实现返回	php获得刚插入数据的i