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

首先，页面效果如下：

 需求：

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

知识点：

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;

                width: 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-width: 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';

作者：白开水

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

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

用js实现文字提示层 ---总结的更多相关文章

  1. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  2. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  3. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  4. 实现password框中显示文字提示的方式

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就 ...

  5. 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下     效果图   // JavaScript Document (function($){ $.fn ...

  6. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  7. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  9. 在VS中让一个JS文件智能提示另一个JS文件中的成员

    “在VS中如何让一个JS文件智能提示另一个JS文件中的成员” 有时候会有这种情况:当我的一个Web页面引用了两个JS文件(假如分别叫common.js和JScript1.js),如果JScript1. ...

随机推荐

  1. Android SQLite 加密模块实现入门

    安卓的安全性那是众所周知,最近学习安卓apk反编译,发现某些即时通讯软件都封装了自己独立使用的数据库模块(从framework java/C++ 一直到底层的SQLite的C库), 为了防止被root ...

  2. 【转】14个最佳的HTML/CSS设计和开发框架

    专业的网页设计是既复杂又耗时的.它需要HTML和CSS框架的完美结合.这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力. 高效的框架不仅是网站设计的基础,它提供的各种丰富多彩的功能 ...

  3. 网络请求工具--AFNetworking 分类： ios技术 2015-02-03 08:17 76人阅读 评论(0) 收藏

    在我们开发过程中,网络请求是必不可少的,对于网络框架,现在主流的大概只有三类:ASI框架: HTTP终结者(已经停止更新了),MKNetworkKit ,AFN.今天我就来浅谈一下这个AFN AFNe ...

  4. onethink微博插件雏形记

    2014年7月30日 17:08:44 后台微博插件: 一.功能: 1.绑定微博 2.发布的文章自动发布到新浪微博 3.插件独立性强,修改地方少 二.效果: 插件目录 工程地址:http://down ...

  5. Python关键字yield的解释

    yield 是一个类似 return 的关键字,只是这个函数返回的是个生成器. >>> def createGenerator() : ... mylist = range(3) . ...

  6. 超强JavaScript编辑器WebStorm代码提示迟缓问题及其它想到的

    去D2后发现 Hedger 的js编辑器是webStorm,便下载来试试,结果发现: 虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document),但是做为 Int ...

  7. Struts1、WebWork、Struts2介绍

    一.Struts1 1.Struts1原理简介 Struts1框架以ActionServlet作为控制器核心,整个应用由客户端请求驱动.当客户端向Web应用发送请求时,请求被Struts1的核心控制器 ...

  8. Adapter接口及实现类

    Adapter本身只是一个接口,它派生了ListAdapter和SpinnerAdapter两个子接口,其中ListAdapter为AbsListView提供列表项,而SpinnerAdapter为A ...

  9. C语言中strcpy,strcmp,strlen,strcat函数原型

    //strcat(dest,src)把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0' char *strcat(char * strDest, const char ...

  10. Pomelo框架

    一个典型的多进程MMO运行架构, 如下图所示: pomelo框架的组成如图所示: 架构把游戏服务器做了抽象, 抽象成为两类:前端服务器和后端服务器, 如图: 前端服务器(frontend)的职责: 负 ...