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

本人新手，网上找来的没有胡乱修改，请大家帮忙看看，这效果大家应该都用得到吧，但是不知道怎么改成重复多次使用的，如：提示内容1，提示内容2，提示内容3，等等。。还有就是，延迟1秒显示提示层。
<!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.   

    不知道你说的重复多次是什么意思这种东东的原理就是一个跟随鼠标的div，为了使这个div不溢出边界，就加上一个边界的检测来让div适应屏幕
      

  2.   


    你看这段代码，提示层的内容写到这里tagShowBox.innerHTML="<span id=\"Teacher\">提示层的内容，</span>";  ，那么页面上的每个提示，显示的内容就都一样了，我想要的是，如链接1，提示层，链接1的提示内容
    链接2，提示层，链接2的提示内容
    链接3，提示层，链接3的提示内容
    等等。就像下面这段代码，但是这段代码，没有延迟，没有自适应边界。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Coda Bubble Example</title>
        <style type="text/css">
        <!--
            * {margin: 0;padding: 0;}
            body {padding: 10px;}
            h1 {margin: 14px 0;font-family: 'Trebuchet MS', Helvetica;}
            p {margin: 14px 0;font-family: 'Trebuchet MS', Helvetica;}
            .bubbleInfo {float:left;position: relative;width: 100px;}
            .trigger {position: absolute;}
            /* Bubble pop-up */
            .popup {
                position: absolute;
                display: none;
                z-index: 50;
                border-collapse: collapse;
            }    
        -->
        </style>
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
        <script type="text/javascript">
        <!--
        $(function () {
            $('.bubbleInfo').each(function () {
                var distance = 10;
                var time = 250;
                var hideDelay = 200;
                var hideDelayTimer = null;            var beingShown = false;
                var shown = false;
                var trigger = $('.trigger', this);
                var info = $('.popup', this).css('opacity', 0);
                $([trigger.get(0), info.get(0)]).mouseover(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    if (beingShown || shown) {
                        // don't trigger the animation again
                        return;
                    } else {
                        // 把所有功能放在一个函数里面
                        var fn = function(){
                            // reset position of info box
                            beingShown = true;                        info.css({
                                top: 25,
                                left: 15,
                                display: 'block'
                            }).animate({
                                top: '-=' + distance + 'px',
                                opacity: 1
                            }, time, 'swing', function() {
                                beingShown = false;
                                shown = true;
                            });
                        }                    // 延迟一秒执行fn
                        setTimeout(fn,1000);
                    }
                    return false;
                }).mouseout(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                        info.animate({
                            top: '-=' + distance + 'px',
                            opacity: 0
                        }, time, 'swing', function () {
                            shown = false;
                            info.css('display', 'none');
                        });
                    }, hideDelay);
                    return false;
                });
            });
        });
        //-->
        </script>
    </head>
    <body>
    <ul>
    <li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">111</a>
        <span class="popup">
            <a title="Read the release notes" href="./releasenotes.html">release notes</a><br><img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
        </span>
    </li>
    <li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">222</a>
        <span class="popup">
            <a title="Read the release notes" href="./releasenotes.html">release notes11222</a>
        </span>
    </li>
    <li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">333</a>
        <span class="popup">
            <a title="Read the release notes" href="./releasenotes.html">release note3333</a>
        </span>
    </li>
    </ul>
    </body>
    </html>
      

  3.   

    我汗~~~这么个重复法。你直接说要每个提示层显示不同的内容不就完了呀。看来我理解能力有待加强。修改如下即可：
    版本1：提示内容从触发对象的 data属性中获取
    <!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>
      

  4.   

    版本2：直接将提示内容当成参数传入
    <!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]);
    }
    /*
        参数：
            txt:要显示的文本内容
    */
    function showTagsearch(txt){
            try{clearTimeout(wittingHiddenTimer);} catch(e){}
            moveTagBox();
            setTimeout('$("tagShowBox").style.display=\'block\'',1000);//延时1秒显示提示层
            $("Teacher").innerHTML=txt;
    }
    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>LZ的js基础有待加强，都是很简单，很基础的东东
      

  5.   

    我想要 提示层内可以加内容，和图片，链接这样的效果
    <li class="bubbleInfo"><a class="trigger" href="http://www.baidu.com">111</a>
        <span class="popup">
            <a title="Read the release notes" href="./releasenotes.html">release notes</a><br><img src="http://www.baidu.com/img/baidu_sylogo1.gif"/>
        </span>
    </li>