模似html元素tilte提示

最新推荐文章于 2024-07-25 11:26:35 发布

fengkuangshl

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量109

点赞数

文章标签： title html div body script

本文链接：https://blog.csdn.net/fengkuangshl/article/details/84059390

版权


<html>
<head>
<title>div模拟title</title>
</head>
<body>
<script>
    document.write('<div id=pltsTipLayer style="display: none;position: absolute;z-index:10001"></div>');  
    function pltsinits()  
    {  
        document.onmouseover   = plts;  
        document.onmousemove = moveToMouseLoc;  
    }  
    function plts()  
    {   
        var o=event.srcElement; 
        if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};  
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};  
        var pltsPop=o.dypop;  
        if(pltsPop!=null&&pltsPop!=""&typeof(pltsPop)!="undefined")  
        {  
            pltsTipLayer.style.left=-1000;  
            pltsTipLayer.style.display='';  
            var Msg=pltsPop.replace(/\n/g,"<br>");  
            MsgMsg=Msg.replace(/\0x13/g,"<br>");  
            var re=/\{(.[^\{]*)\}/ig;  
            MsgMsg=Msg.replace(re,"");  
            MsgMsg=Msg.replace("<br>","");  
            var content ='<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe ><tr><td width="100%"><table  cellspacing="1" cellpadding="0" style="width:100%;solid; "><tr><td style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%;background-color: #FFFFE1;font-size:12px;">'+Msg+'</td></tr></table></td></tr></table>';  
           pltsTipLayer.innerHTML=content;  
           toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);  
           moveToMouseLoc();  
           return true;  
        }else{  
          pltsTipLayer.innerHTML='';  
          pltsTipLayer.style.display='none';  
          return true;  
        }  
    }  

    function moveToMouseLoc()  
    {  
        var pltsoffsetX = 5;   // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适  
        var pltsoffsetY = 5; // 弹出窗口位于鼠标下方的距离；3-12 合适  
        var popLeftAdjust =0;  
        var popLeftAdjust =0;  
        if(pltsTipLayer.innerHTML=='')return true;  
        var MouseX=event.x;  
        var MouseY=event.y;  
        //window.status=event.y;  
        var popHeight=pltsTipLayer.clientHeight;  
        var popWidth=pltsTipLayer.clientWidth;  
        if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight){  
           popTopAdjust=-popHeight-pltsoffsetY*1.5;  
        }else{  
            popTopAdjust=0;  
        }  
        if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth){  
           popLeftAdjust=-popWidth-pltsoffsetX*2;  
        }else{  
           popLeftAdjust=0;  
        }  
        if(MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust<0){
            pltsTipLayer.style.left=document.body.scrollLeft; 
        } else{
            pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust; 
        }
        if(MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust<0){
            pltsTipLayer.style.top=document.body.scrollTop;
        }else{
            pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
        }
        return true;  
    }  
    pltsinits();  
</script>
<a href="#" title="活动简介

在这里，写下你们的生日，谁是那个与你同年同月同日生的有缘人呢？一起等待，一起去下面的活动讨论里去寻找 …… 

有缘的人们，设置头像完备资料，踊跃地互相关注起来吧～">我爱我家</a>
<a title="cccccccccccccccc">qweqw</a>
</body></html>

fengkuangshl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模似html元素tilte提示

[code="html"]div模拟title document.write(''); function pltsinits() { document.onmouseover = plts; document.onmousemove = moveToMouseLoc; } ...
复制链接

扫一扫