类似QQ空间tip提示层，上下左右自适应本人新手，网上找来的没有胡乱修改，请大家帮忙看看，这效果大家应该都用
类似QQ空间tip提示层，上下左右自适应
本人新手，网上找来的没有胡乱修改，请大家帮忙看看，这效果大家应该都用得到吧，但是不知道怎么改成重复多次使用的，如：提示内容1，提示内容2，提示内容3，等等。。。。。还有就是，延迟1秒显示提示层。
- JScript code
<!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>ajaxtest2</title><style type="text/css"> <!--body { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}#tagShowBox { background-color: #EFFBFE; font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; border: 1px solid #8AD7FB; display: none;}--></style><script language="javascript"> <!--var tagBoxWidth="100px";var tagBoxHeight="50px";var wittingHiddenTimer = 0;var cWidth = parseInt(document.documentElement.clientWidth);window.onload=function(){ createTagShowBox();}function $(){ return document.getElementById(arguments[0]);}function showTagsearch(){ try{clearTimeout(wittingHiddenTimer);} catch(e){} moveTagBox(); $("tagShowBox").style.display='block';}function moveTagBox(){ var tagBoxLeft=getMousePos().x; if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){ agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px"; }else{ agBoxLeft=tagBoxLeft+"px"; } $('tagShowBox').style.left=agBoxLeft; var tagBoxTop=getMousePos().y; if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){ tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px"; }else{ tagBoxTop=(tagBoxTop+15)+"px"; } $('tagShowBox').style.top=tagBoxTop; }document.onmouseover=function(){ var ev = asfman.Event().srcDom; if(ev.name!="mytest"){ try{clearTimeout(wittingHiddenTimer);} catch(e){} wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500); }else{ try{clearTimeout(wittingHiddenTimer);} catch(e){} }}function hiddenTagShowBox(){ $("tagShowBox").style.display="none"; try{clearTimeout(wittingHiddenTimer);} catch(e){} }function createTagShowBox(){ var tagShowBox=document.createElement("div"); tagShowBox.id="tagShowBox"; tagShowBox.setAttribute("class","tagShowBox"); tagShowBox.setAttribute("name","mytest"); tagShowBox.style.width=tagBoxWidth; tagShowBox.style.height=tagBoxHeight; tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里 tagShowBox.innerHTML="<span id=\"Teacher\"></span>"; document.getElementsByTagName("body")[0].appendChild(tagShowBox);}function getMousePos(){var ev = asfman.Event();return { x:ev.cltX + document.documentElement.scrollLeft - 2, y:ev.cltY + document.documentElement.scrollTop - 2};}var asfman = {};var isIE = navigator.appName == "Microsoft Internet Explorer";var isFF = navigator.appName == "Netscape";asfman.Event = function(){ var ev; if(isIE) { ev = window.event; }else if(isFF){ var f = this.Event.caller; while(f!=null) { var e = f.arguments[0]; if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent)) { ev = e; break; } f = f.caller; } } if(ev) { ev.srcDom = ev.srcElement || ev.target; ev.cltX = ev.clientX || ev.pageX; ev.cltY = ev.clientY || ev.pageY; return ev; } return null;}//--></script></head><body><p align="left"><a href="#" name="mytest" onmouseover="showTagsearch()">左侧</a></p><p align="center"><a href="#" name="mytest" onmouseover="showTagsearch()">中间</a></p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><div style="float:right;background:red"><a href="#" name="mytest" onmouseover="showTagsearch()">右侧</a></div></body></html>
[解决办法]
我汗~~~这么个重复法。你直接说要每个提示层显示不同的内容不就完了呀。看来我理解能力有待加强。修改如下即可：
版本1：提示内容从触发对象的 data属性中获取
- HTML code
<!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>ajaxtest2</title><style type="text/css"> <!--body { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}#tagShowBox { background-color: #EFFBFE; font-size: 12px; line-height: 150%; font-family: Arial, Helvetica, sans-serif; border: 1px solid #8AD7FB; display: none;}--></style><script language="javascript"> <!--var tagBoxWidth="100px";var tagBoxHeight="50px";var wittingHiddenTimer = 0;var cWidth = parseInt(document.documentElement.clientWidth);window.onload=function(){ createTagShowBox();}function $(){ return document.getElementById(arguments[0]);}/* 参数： o:我这里传的是对像，然后通过o.getAttribute("data")来获取应该显示的文本，你也可以修改为直接传入文本，然后下面做修改*/function showTagsearch(o){ try{clearTimeout(wittingHiddenTimer);} catch(e){} moveTagBox(); setTimeout('$("tagShowBox").style.display=\'block\'',1000);//延时1秒显示提示层 $("Teacher").innerHTML=o.getAttribute("data");//如果传入的参数为文本，则o.getAttribute("data")改为o即可。且将触发对象的 data="提示内容" 删除即可 }function moveTagBox(){ var tagBoxLeft=getMousePos().x; if(cWidth-tagBoxLeft<(parseInt($('tagShowBox').style.width)+2)){ agBoxLeft=cWidth-(parseInt($('tagShowBox').style.width)+20)+"px"; }else{ agBoxLeft=tagBoxLeft+"px"; } $('tagShowBox').style.left=agBoxLeft; var tagBoxTop=getMousePos().y; if(parseInt(document.documentElement.clientHeight)-tagBoxTop<parseInt($('tagShowBox').style.height)){ tagBoxTop=(tagBoxTop-parseInt($('tagShowBox').style.height)-15)+"px"; }else{ tagBoxTop=(tagBoxTop+15)+"px"; } $('tagShowBox').style.top=tagBoxTop; }document.onmouseover=function(){ var ev = asfman.Event().srcDom; if(ev.name!="mytest"){ try{clearTimeout(wittingHiddenTimer);} catch(e){} wittingHiddenTimer=setTimeout("hiddenTagShowBox()",500); }else{ try{clearTimeout(wittingHiddenTimer);} catch(e){} }}function hiddenTagShowBox(){ $("tagShowBox").style.display="none"; try{clearTimeout(wittingHiddenTimer);} catch(e){}}function createTagShowBox(){ var tagShowBox=document.createElement("div"); tagShowBox.id="tagShowBox"; tagShowBox.setAttribute("class","tagShowBox"); tagShowBox.setAttribute("name","mytest"); tagShowBox.style.width=tagBoxWidth; tagShowBox.style.height=tagBoxHeight; tagShowBox.style.position="absolute";//STYLE的内容可以直接写在CSS里 tagShowBox.innerHTML="<span id=\"Teacher\"></span>"; document.getElementsByTagName("body")[0].appendChild(tagShowBox);}function getMousePos(){var ev = asfman.Event();return { x:ev.cltX + document.documentElement.scrollLeft - 2, y:ev.cltY + document.documentElement.scrollTop - 2};}var asfman = {};var isIE = navigator.appName == "Microsoft Internet Explorer";var isFF = navigator.appName == "Netscape";asfman.Event = function(){ var ev; if(isIE) { ev = window.event; }else if(isFF){ var f = this.Event.caller; while(f!=null) { var e = f.arguments[0]; if(e&&(e.constructor==KeyboardEvent||e.constructor==MouseEvent)) { ev = e; break; } f = f.caller; } } if(ev) { ev.srcDom = ev.srcElement || ev.target; ev.cltX = ev.clientX || ev.pageX; ev.cltY = ev.clientY || ev.pageY; return ev; } return null;}//--></script></head><body><p align="left"><a href="#" name="mytest" data="左侧提示的内容" onmouseover="showTagsearch(this)">左侧</a></p><p align="center"><a href="#" name="mytest" data="中间提示的内容" onmouseover="showTagsearch(this)">中间</a></p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><div style="float:right;background:red"><a href="#" name="mytest" data="右侧提示的内容" onmouseover="showTagsearch(this)">右侧</a></div></body></html>