教程集 > jQuery > jquery 教程 > 正文 a 鼠标滑过链接出现的提示框

a 鼠标滑过链接出现的提示框

发布时间：2023-12-24 编辑：jiaochengji.com

教程集为您提供a 鼠标滑过链接出现的提示框等资源，欢迎您收藏本站，我们将为您提供最新的a 鼠标滑过链接出现的提示框资源

提示：您可以先修改部分代码再运行

<!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=gb2312" />  <title>无标题文档</title>  <script type="text/javascript">  function enableTooltips(id){  var links,i,h;  if(!document.getElementById || !document.getElementsByTagName) return;  AddCss();  h=document.createElement("span");  h.id="btc";  h.setAttribute("id","btc");  h.style.position="absolute";  document.getElementsByTagName("body")[0].appendChild(h);  if(id==null) links=document.getElementsByTagName("a");  else links=document.getElementById(id).getElementsByTagName("a");  for(i=0;i<links.length;i  ){  Prepare(links[i]);  }  }function Prepare(el){  enable = el.getAttribute("enabletitle");  	var tooltip,t,b,s,l;  	t=el.getAttribute("title");  	if(t==null || t.length==0) t="link:";  	el.removeAttribute("title");  if(enable=="true"){  	tooltip=CreateEl("span","tooltip");  	s=CreateEl("span","top");  	s.appendChild(document.createTextNode(t));  	tooltip.appendChild(s);  	b=CreateEl("b","bottom");  	l=el.getAttribute("href");  	if(l.length>30) l=l.substr(0,27) "...";  	b.appendChild(document.createTextNode(l));  	tooltip.appendChild(b);  	tooltip.style.backgroundColor="#EEEEEE";  //稍微修饰下，加个背景，免得和下面的字叠加  	setOpacity(tooltip);  	el.tooltip=tooltip;  	el.onmouseover=showTooltip;  	el.onmouseout=hideTooltip;  	el.onmousemove=Locate;    }  }function showTooltip(e){  document.getElementById("btc").appendChild(this.tooltip);  Locate(e);  }function hideTooltip(e){  var d=document.getElementById("btc");  if(d.childNodes.length>0) d.removeChild(d.firstChild);  }function setOpacity(el){  el.style.filter="alpha(opacity:95)";  el.style.KHTMLOpacity="0.95";  el.style.MozOpacity="0.95";  el.style.opacity="0.95";  }function CreateEl(t,c){  var x=document.createElement(t);  x.className=c;  x.style.display="block";  return(x);  }function AddCss(){  var l=CreateEl("link");  l.setAttribute("type","text/css");  l.setAttribute("rel","stylesheet");  l.setAttribute("href","?.css");  l.setAttribute("media","screen");  document.getElementsByTagName("head")[0].appendChild(l);  }function Locate(e){  var posx=0,posy=0;  if(e==null) e=window.event;  if(e.pageX || e.pageY){  posx=e.pageX; posy=e.pageY;  }  else if(e.clientX || e.clientY){  if(document.documentElement.scrollTop){  posx=e.clientX document.documentElement.scrollLeft;  posy=e.clientY document.documentElement.scrollTop;  }  else{  posx=e.clientX document.body.scrollLeft;  posy=e.clientY document.body.scrollTop;  }  }  document.getElementById("btc").style.top=(posy 10) "px";  document.getElementById("btc").style.left=(posx-20) "px";  }  </script>  <script type="text/javascript">  window.onload=function(){enableTooltips()};  </script>  <style type="text/css">  body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333}  div#container{width: 500px;margin:0 auto}  h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px}  p{margin: 0 0 1.7em}  a{color: #F60;font-weight:bold}  a:hover{color: #F00}  .tooltip{  width: 200px; color:#000;  font:lighter 11px/1.3 Arial,sans-serif;  text-decoration:none;text-align:center}.tooltip span.top{padding: 30px 8px 0;       background: url([img]http://www.111cn.net/banner/banner.gif[/img]) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912;       background: url([img]http://www.111cn.net/banner/banner.gif[/img]) no-repeat bottom}  </style>  </head>  <body>  <div id="container">  <p>My space (需要的给链接加上 enabletitle="true")</p>  <p>No Title Example</p>  </div>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
鼠标的滚轮失灵怎么办？
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 对css滑动门技术的一些总结和归纳
 Highcharts教程(9) PlotOptions之area区域图
 jQuery图片预览插件 imgPreview
玩转jQuery按钮请告诉我你最喜欢哪些？
非常不错js弹出层效果代码
 javascript文字链提示框效果的实现代码
 CSS滑动门技术教程
 推荐10个超棒的jQuery工具提示插件

上一篇：拖动层div 代码下一篇：鼠标经过变色

[关闭]

a 鼠标滑过链接出现的提示框

最近更新

浏览排行