用js实现文字提示层 ---总结

文字提示层在项目中应该是比较常见的，我工作中项目中就用到了，原理是一样，只不过形式不一样，今天通过看视频学习，学会了，总结下：

首先，页面效果如下：

需求：

当鼠标移入到红色字体是，提示框会显示在下方，当鼠标离开是，提示框将隐藏

知识点：

onmouseover 与 onmouseout，offsetLeft 与 offsetTop、innerHTML

接下来看代码：

页面布局：

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

css代码样式如下：

body {
                margin: 0;
            }
            #text {
                margin: 100px auto 0;
                padding: 10px;
                 500px;
                line-height: 40px;
                font-size: 24px;
                border: 1px solid #000;
                
            }
            #text strong {
                color: red;
                cursor: pointer;
            }
            #tips {
                position: absolute;
                padding: 10px;
                border: 1px solid #000;
                line-height: 28px;
                font-size: 16px;
                display: none;
                left: 0;
                top: 0;
                background: white;
                max- 200px;
                
            }

接下来是脚本部分，获取页面元素

　　　　　　　　　var strongs = document.querySelectorAll("strong");
                var tips = document.getElementById("tips");
                var arr = [
                    'JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
                    'JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。',
                    '超文本标记语言，标准通用标记语言下的一个应用。',
                    '超文本标记语言，标准通用标记语言下的一个应用。'
                ];

因为我们要操作的是所有的 strong 元素，所以这里需要用到 for 循环

for(var i=0;i<strongs.length;i++){
                    strongs[i].index = i;
                    strongs[i].onmouseover = function(){
                        tips.style.display = 'block';　　　　　　　　
                        tips.innerHTML = arr[this.index];
                        
                        tips.style.left = this.offsetLeft + 'px';
                        tips.style.top    = this.offsetTop + 30 + 'px';
                    }
                    
                    strongs[i].onmouseout = function(){
                        tips.style.display = 'none';
                    }
                }

注意：

难点①：

strongs[i].index = i;

这里在前面学习时，有点迷糊，现在是理解了，内容放在 arr 数组当中，我们要取到对应的某一条数据时，因为strong标签跟 arr 数组中的数据是一一对应的关系，我们要通过strong 取到 arr 对应的某一条数据，用索引值的方法即可。

tips.innerHTML = arr[this.index];

难点②：

tips.style.left = this.offsetLeft + 'px';
tips.style.top    = this.offsetTop + 30 + 'px';

其实这里也很好理解，因为 strong 的父级没有定位，tips 也没有父级，offsetLeft 与 offsetTop 如果没有定位的父级，那默认是到html的距离

补充：要用到这个offset的属性的话，父级要给个定位

tips.style.left = this.offsetLeft + 'px';
tips.style.top    = this.offsetTop + 30 + 'px';

用js实现文字提示层 ---总结

作者：白开水

出处：http://www.cnblogs.com/hongxp/

本文以学习、总结和分享为主，如需转载，请联系本人，标明作者和出处，非商业用途！