这只是个学习原生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. im2uint8函数分析

    环境:Win7 64位 + Matlab R2010a 本次分析的函数为im2uint8,这个函数在图像处理中要用到,主要把图像数据类转换到uint8 uint8函数有效的输入的图像数据类为:logi ...

  2. MYSQL存储过程中-流程控制语句

    存储过程中常用的流程控制 复习下存储过程内部的语法 定义存储过程体的局部变量: 定义方法:DECLARE a INT DEFAULT 100或者DECLARE   a INT ; SET a=100; ...

  3. Windows10 磁盘活动时间百分之百导致系统卡顿解决方法

    最近电脑边的特别慢,打开任务管理器发现是磁盘活动时间时不时的就会变成100%.起初是以为硬盘出问题了,后来网上查了一下才发现很多人都遇到过这个问题,其原因就是Windows的SuperFetch和家庭 ...

  4. [C++程序设计]指向数组元素的指针

    如果先使p指向数组a的首元素(即p=a),则: (1) p++(或p+=1).使p指向下一元素,即a[1]. 如果用*p,得到下一个元素a[1]的值. (2) *p++.由于++和*同优先级,结合方向 ...

  5. [转]fatal error: iostream.h: No such file or directory

    iostream.h是非标准头文件,iostream是标准头文件形式.iostream.h时代没有名词空间,即所有库函数包括头文件iostream.h都声明在全局域.为了体现结构层次,c++标准委员会 ...

  6. javascript get获取参数

    function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*) ...

  7. Windows中安装Emacs

    首先从http://gnu.org/software/emacs中下载window下的压缩包,然后解压..运行ROOT/bin/addpm.exe进行安装. 将鼠标右键添加Emacs编辑: 1. 打开 ...

  8. TEA encryption with 128bit key

    If anyone needs some basic encryption in software, here's one solution. This TEA implementation fits ...

  9. 【关于微软的上一代模板引擎 T4引擎】

    导语:国内有名的动软代码生成器用的就是T4引擎......可以自己下载下来用用,批量生成固定模式的代码文件,十分有用........... 示例代码:示例代码__你必须懂的T4模板:浅入深出.rar ...

  10. C语言随笔_return答疑

    1. 例子,看实例2-2.这道题有同学会问,那个return有什么用?这么讲吧,return是个英文单词,中文意思是“返回”,用在程序里也是返回的意思,返回啥呢?返回一个值.在func函数中,retu ...