文字提示层小例子

下面是一个文字提示层小例子。

知识点：

offsetLeft   找到元素最左边离最近的有定位的父级之间的距离，不带单位，并且不带边框

offsetTop   找到元素最上边离最近的有定位父级之间的距离，不带单位，并且不带边框

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            #text{
                width: 500px;
                border:1px solid black;
                margin:70px auto;
                font:24px/40px "微软雅黑";
                padding: 10px;
            }
            #text strong{
                color: red;
                cursor: pointer;
            }
            
            #tips{
                position: absolute;
                left:0;
                top:0;
                border:1px solid black;
                max-width: 200px;
                background: white;
                display:none;
            }
        </style>

        <script>
            window.onload=function(){
                var txt=document.getElementById("text");
                var strongs=document.querySelectorAll("#text strong");
                var tips=document.getElementById("tips");
                
                var arr=['JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
                         'JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
                         '超文本标记语言，标准通用标记语言下的一个应用。',
                         '超文本标记语言，标准通用标记语言下的一个应用。'
                         
                ];
                for(var i=0;i<strongs.length;i++){
                    strongs[i].index=i;
                    strongs[i].onmouseover=function(){
                        tips.style.display="block"
                        tips.style.left=this.offsetLeft+"px";
                        tips.style.top=this.offsetTop+30+"px";
                        tips.innerHTML=arr[this.index];
                    }
                    strongs[i].onmouseout=function(){
                        tips.style.display='none';
                    }

                }
            }
        </script>

    </head>
    <body>
        <div id="text">
            <strong>JavaScript</strong>一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为<strong>JavaScript</strong>引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在<strong>HTML</strong>（标准通用标记语言下的一个应用）网页上使用，用来给<strong>HTML</strong>网页增加动态功能。
        </div>
        <div id="tips">wqefewfvewfvwqegfv</div>
    </body>
</html>
View Code

 

posted @ 2018-08-20 14:19  只是那些  阅读(106)  评论(0)  编辑  收藏  举报