当前位置: 代码迷 >> JavaScript >> 类似QQ空间tip提示层,下上左右自适应
  详细解决方案

类似QQ空间tip提示层,下上左右自适应

热度:97   发布时间:2012-09-14 23:00:49.0
类似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>


 
  相关解决方案