这只是个学习原生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. C语言数据类型转换

    变量的数据类型是可以转换的.转换的方法有两种,一种是自动转换,一种是强制转换. 自动转换 自动转换发生在不同数据类型的量混合运算时,由编译系统自动完成.自动转换遵循以下规则: 若参与运算量的类型不同, ...

  2. Stall Reservations(POJ 3190 贪心+优先队列)

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4434   Accepted: 158 ...

  3. dataGridView行高自适应

    今天从网上查询相关datagridview行高自适应的信息时,好多都是告诉你直接用下面三行代码: dataGridView1.AutoSizeRowsMode = DataGridViewAutoSi ...

  4. information_schema.profiling学习

    information_schema.profiling可以用来分析每一条SQL在它执行的各个阶段的用时,注意这个表是session 级的,也就是说如果session1 开启了它:session2没有 ...

  5. T-SQL 脚本

    1.USE语句 USE语句用于设置当前数据库,如果没有USE语句,那么就由执行脚本的任何用户来确定执行脚本时当前数据库是正确的.如果只是一个通用脚本,那么省去USE语句实际上可能更有益.通常,如果在脚 ...

  6. Linux学习，在线版

    考虑加入Linux教派,最初被Linux吸引是看了<Unix编程艺术>,虽然里面的个别非常教条,极端.但是里面大部分的设计思想我还是认同的. 下面是我整理的一些Linux资料,其实我打算折 ...

  7. Redhat关闭SELinux和防火墙的办法（转）

    Redhat使用了SELinux来增强安全,关闭的办法为:1. 永久有效修改 /etc/selinux/config 文件中的 SELINUX="" 为 disabled ,然后重 ...

  8. haproxy nginx 多路径

    nginx 多路径: location / { root /t/deploy/zjdev/deployedApps/zjzc-web-frontEnd/; index index.html index ...

  9. 一 VC2008环境中ICE的配置

    VC2008环境中ICE的配置 ICE 3.4.0的下载页面 http://www.zeroc.com/download_3_4_0.html 环境变量配置  1.Ice-3.4.0安装到c:\Ice ...

  10. mysql 存储过程 事务处理

    BEGIN ; ; START TRANSACTION; #这边放sql语句,涉及到的表必须都为InnoDB THEN ROLLBACK; ELSE COMMIT; END IF; END