这只是个学习原生javascript过程中的一个练手效果 不做说明解释 直接上代码 算是个参考

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>关键字title提示</title>

    <style>

    *{padding:0;margin:0;}

    #test{width:700px; margin:50px auto 0; line-height:26px; font-size:14px;}

    p { text-indent:2em; position:relative;}

    .hint { color:#3CF;}

    #popHint { border:1px solid #F60; position:absolute; padding:0 4px; background:white; border-radius:2px;}

    </style>

    <script>

    window.onload = function() {

        var oTest = document.getElementById('test');

        var oHint = getClassName(document, '*', 'hint');

        hint(oHint, 'popHint');

        function hint(arrHint, popHintId) {

            for(var i=0; i<arrHint.length; i++) {

                arrHint[i].onmouseover = function() {

                    var popHint = document.createElement('div');

                    popHint.id = popHintId;

                    popHint.innerHTML = this.innerHTML;

                    var p = getPos(this);

                    popHint.style.position = 'absolute';

                    popHint.style.left = p.left + 'px';

                    popHint.style.top = p.top + this.offsetHeight + 'px';

                    document.body.appendChild(popHint);

                }

                arrHint[i].onmouseout = function() {

                    document.body.removeChild(popHint);

                }

            }

        }

        function getClassName(obj, tagName, className){

            var ele=obj.getElementsByTagName(tagName);

            var result=[],aClassName=className.split(',').join('|');

            var re=new RegExp('((^|\\s+)('+aClassName+')(\\s+|$))');

            for(var i=0;i<ele.length;i++){

                if(re.test(ele[i].className)){

                    result.push(ele[i]);

                }

            }

            return result;

        }

        function getPos(obj) {

            var pos = {left:0,top:0};

            while(obj) {

                pos.left += obj.offsetLeft;

                pos.top += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return pos;

        }

    }

    </script>

</head>

<body>

    <div id="test">

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

        <p>在1995年时，由<span class="hint">Netscape</span>公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为<span class="hint">Netscape</span>与<span class="hint">Sun</span>合作，<span class="hint">Netscape</span>管理层希望它外观看起来像<span class="hint">Java</span>，因此取名为<span class="hint">JavaScript</span>。但实际上它的语法风格与Self及Scheme较为接近。</p>

    </div>

</body>

</html>

javascript模拟html title的更多相关文章

  1. 通过Javascript模拟登陆Windows认证的网站

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模拟登陆</title ...

  2. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  3. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  4. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  5. 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  6. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  7. javascript模拟title提示效果

    本代码可以实现如下情况: 1.js实现title是为了解决自定义样式和格式! 2.希望传入的格式可以不限制是否包含html结构! 3.可以自定义显示层的位置! js如下: function GetAb ...

  8. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

  9. JavaScript模拟鼠标右键菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. oracle日记

    win7旗舰版安装oracle11g 64位用sql plus可以登录 但用pl/sql dev报错ORA-12560 小型数据库:access.foxbase 中型数据库:mysql.sqlserv ...

  2. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  3. flash播放器遮挡页面中元素问题解决

    今天在做一个包含Flash播放器的页面弹出效果时发现Flash播放器总是跑到页面最上层,发现这个问题与Flash的”wmode”属性有关,至于该元素详细此处不做记录,解决办法如下: IE:加入参数:& ...

  4. elasticsearch 搜索不支持单词的部分进行匹配

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# curl -XGET http://192.168.32.80:9200/logstash-201 ...

  5. Quartz.NET作业调度框架详解

    Quartz.NET作业调度框架详解 http://www.cnblogs.com/lmule/archive/2010/08/28/1811042.html

  6. Java开发者工具

    From:http://www.csdn.net/article/2015-03-26/2824317 1. Notepad++ Notepad++是用于编辑xml.脚本以及记笔记的最佳工具.这个工具 ...

  7. Linux NFS服务器的安装与配置（转载）

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  8. hibernate Restrictions用法

    QBC常用限定方法 Restrictions.eq --> equal,等于. Restrictions.allEq --> 参数为Map对象,使用key/value进行多个等于的比对,相 ...

  9. libev事件库学习笔记

    一.libev库的安装 因为个人的学习环境是在ubuntu 12.04上进行的,所以本节仅介绍该OS下的安装步骤. 使用系统工具自动化安装: sudo apt-get install libev-de ...

  10. Virtual Friends（并查集+map）

    Virtual Friends Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...