这只是个学习原生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. easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值

    通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...

  2. [C++程序设计]内置函数

    注意: 可以在声明函数和定义函数时同时写 inline,也可以只在其中一处声明inline,效果相同,都能按内置函数处理. 使用内置函数可以节省运行时间,但却增加了目标 程序的长度.因此一般只将规模很 ...

  3. shell脚本练习(随机取名)

    1.写一个脚本,实现随机选人功能,脚本需传递一个参数进去,如    pick.sh 1 出现结果"家驹”  pick.sh 3 出现结果 "落叶" "jason ...

  4. 雅思创始人Keith Taylor谈英语学习

    雅思创始人Keith Taylor谈英语学习 “要学的是信息,而不是语言” 我们要学习一个国家的语言就得知道这个国家的方方面面.要学习英语就得了解英美国家的社会.经济.人文.历史等各方面的信息. 大家 ...

  5. 自己动手写PHP MVC框架

    自己动手写PHP MVC框架 来自:yuansir-web.com / yuansir@live.cn 代码下载: https://github.com/yuansir/tiny-php-framew ...

  6. 通过Alexa API获取Alexa排名

    我们通会用Alexa的网站(或其它站长工具网站)来栓查我们的网​站流量排名,这样就必须去那些网站.实际上,可以通过Alexa XML API 获取网站的Alexa相关的数据(XML格式的),再使用XM ...

  7. android style="@[package:]style/style_name" ----------styles.xml

    android.widget ----XML attribute |____style="@[package:]style/style_name"

  8. Windows下FFmpeg快速入门 <第二篇>

    FFmpeg简介 FFmpeg是什么? FFmpeg是用于录制.转换和流化音频和视频的完整解决方案, 包括 libavcodec ,一套领先的音/视频编解码类库.FFmpeg 在Linux上开发,当可 ...

  9. 8个华丽的HTML5相册动画欣赏

    HTML5的图片动画非常丰富,我们也在网站上分享过很多关于HTML5的图片动画.相册在网络中也十分常见,本文我们要分享一些比较华丽的jQuery/HTML5相册动画,希望大家喜欢. 1.HTML5 3 ...

  10. Course Schedule 解答

    Question There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may ...