这只是个学习原生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. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  2. HIBERNATE - 符合Java习惯的关系数据库持久化（精华篇）

    HIBERNATE - 符合Java习惯的关系数据库持久化      下一页 HIBERNATE - 符合Java习惯的关系数据库持久化 Hibernate参考文档 3.0.4   目录 前言 1. ...

  3. 22. Generate Parentheses

    https://leetcode.com/problems/generate-parentheses/ 题目大意:给出n对小括号,求出括号匹配的情况,用列表存储并返回,例如:n=3时,答案应为: [ ...

  4. 问题汇总-20130927-关于rc.local命令无法执行

    场景:/etc/rc.local有语句 /usr/local/apache/bin/apachectl start mysql cactidb -u root -p123456 -e ' set gl ...

  5. python socket 编程之二：tcp三次握手

    建立起一个TCP连接需要经过“三次握手”:第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手:服务器收到syn包,必须确认客户的SYN(ack ...

  6. GTW likes math(BC 1001)

    GTW likes math Accepts: 472 Submissions: 2140 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 1 ...

  7. App 推荐：Spotify

    之前一直用网易云音乐听歌,后来因为沸沸扬扬的 XCode 注入病毒事件,就把它卸了(无奈脸＝.＝) 对比国内其它音乐App,私心觉得网易云音乐还是不错的.没有很多花里胡哨的装饰,里面的歌单做的也还算精 ...

  8. [Oracle] Data Guard 系列（5） - 创建逻辑备库

    在创建逻辑备库之前,必须得先创建物理备库,关于如何创建物理备库,请参考<Data Guard 系列(4) - 在不停主库的情况下创建物理备库>. 1. 在物理备库上停止日志应用服务 SYS ...

  9. linux下java调用.so文件的方法1： JNI

    摘自http://blog.163.com/squall_smile/blog/static/6034984020129296931793/ https://my.oschina.net/simabe ...

  10. UGUI Toggle控件

    今天我们来看看Toogle控件, 它由Toogle + 背景 + 打勾图片 + 标签组成的. 它主要用于单选和多选 属性讲解: Is On: 代表是否选中. Toogle Transition: 在状 ...