html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="1.js"></script>

</head>

<body>

<input onmouseover="wsug(event,'【提示】<br/>此信息来自病人档案，如需修改请去病人档案处修改。')" onmouseout="wsug(event,0)"/>

</body>

</html>

js代码：

/**

 * Created by acer on 2016/7/4.

 */

//鼠标放在input上 出现提示信息

function wsug(e, str) {

    var oThis = arguments.callee;

    if (!str) {

        oThis.sug.style.visibility = 'hidden';

        document.onmousemove = null;

        return;

    }

    if (!oThis.sug) {

        var div = document.createElement('div'), css = 'top:0; left:0; position:absolute; z-index:100; visibility:hidden';

        div.style.cssText = css;

        div.setAttribute('style', css);

        var sug = document.createElement('div'), css = 'font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa';

        sug.style.cssText = css;

        sug.setAttribute('style', css);

        var dr = document.createElement('div'), css = 'position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9';

        dr.style.cssText = css;

        dr.setAttribute('style', css);

        var ifr = document.createElement('iframe'), css = 'position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0';

        ifr.style.cssText = css;

        ifr.setAttribute('style', css);

        div.appendChild(ifr);

        div.appendChild(dr);

        div.appendChild(sug);

        div.sug = sug;

        document.body.appendChild(div);

        oThis.sug = div;

        oThis.dr = dr;

        oThis.ifr = ifr;

        div = dr = ifr = sug = null;

    }

    var e = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr;

    obj.sug.innerHTML = str;

    var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth

        || document.body.clientWidth;

    dh = document.documentElement.clientHeight || document.body.clientHeight;

    var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft

        || document.body.scrollLeft;

    var left = e.clientX + sl + 17 + w < dw + sl && e.clientX + sl + 15

        || e.clientX + sl - 8 - w, top = e.clientY + st + 17 + h < dh + st

        && e.clientY + st + 17 || e.clientY + st - 5 - h;

    obj.style.left = left + 10 + 'px';

    obj.style.top = top + 10 + 'px';

    dr.style.width = w + 'px';

    dr.style.height = h + 'px';

    ifr.style.width = w + 3 + 'px';

    ifr.style.height = h + 3 + 'px';

    obj.style.visibility = 'visible';

    document.onmousemove = function(e) {

        var e = e || window.event, st = document.documentElement.scrollTop

            || document.body.scrollTop, sl = document.documentElement.scrollLeft

            || document.body.scrollLeft;

        var left = e.clientX + sl + 17 + w < dw + sl && e.clientX + sl + 15

            || e.clientX + sl - 8 - w, top = e.clientY + st + 17 + h < dh

            + st

            && e.clientY + st + 17 || e.clientY + st - 5 - h;

        obj.style.left = left + 'px';

        obj.style.top = top + 'px';

    }

}

页面显示：

input输入浮动提示的更多相关文章

  1. DataList：HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  2. Js_Ajax_输入词提示

    输入"1",有提示,否则没有 suggest.jsp #suggest { background-color: #e0e0e0; width: 200px; } var xhr; ...

  3. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  4. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  5. jQuery 下拉框输入匹配提示选项

    做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示

  6. input输入样式，动画

    模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...

  7. input输入子系统

    一.什么是input输入子系统? 1.Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的输入信 ...

  8. 限制input输入类型(多种方法实现)

    1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste= ...

  9. 限制Input输入类型的常见代码集合

    搜集整理常见的限制INPUT输入类型的实现方式: 1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g ...

随机推荐

  1. 【转】手把手教你：Ubuntu14+apache2+django1.7+python2.7下网页/网站部署

    本人亲自尝试了网上众多的部署网页/网站方法,绝大多数都未能试验成功,这次的项目光部署这块遇到了很多问题,大概耗费了我一个星期. 本着:王道论坛中的赠人玫瑰,手留余香的精神.我把自己一路所走的历程发布出 ...

  2. C#基础--之数据类型【转】

    在第一章我们了解了C#的输入.输出语句后,我这一节主要是介绍C#的基础知识,本节的内容也是后续章节的基础,好的开端等于成功的一半.在你阅读完本章后,你就有足够的C#知识编写简单的程序了.但还不能使用继 ...

  3. c/c++指针传参

    首先要理解参数传递,参数传递分值传递,指针传递,引用传递.(就我自己理解,就是把实参对形参进行赋值) 值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值.从被调用函数的角度来说,值传递是单 ...

  4. PRO*C 函数事例 3 -- 游标使用

    1.Oracle中的游标    Oracle使用两种游标: 显式游标和隐式游标. 不管语句返回多少条记录, Oracle为每条使用的SQL语句隐式地定义一个游标. Oracle为每个DELETE , ...

  5. 人工智能，图片识别，与GUI编程

    GUI编程: https://sourceforge.net/projects/pyqt/ 百度aip图片识别 https://pypi.python.org/pypi/baidu-aip

  6. adb常用命令（手机测试）

                                                   ADB安装与常用命令详解 一.ADB意义 adb的全称为Android Debug Bridge,就是起到 ...

  7. Python-类-函数参数-takes 0 positional arguments but 1 was given

    在学习Python基础的时候,在创建某一个shownametest()函数,解析器会报错 TypeError: shownametest() takes 0 positional arguments ...

  8. 【志银】NYOJ《题目490》翻译

    1.题目:翻译 1.1.题目链接 http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=490 1.2.题目内容 2.解题分析 题目输入输出格式描述不 ...

  9. 机器学习sklearn的快速使用--周振洋

    ML神器:sklearn的快速使用 传统的机器学习任务从开始到建模的一般流程是:获取数据 -> 数据预处理 -> 训练建模 -> 模型评估 -> 预测,分类.本文我们将依据传统 ...

  10. 《机器学习实战》 in python3.x

    机器学习实战这本书是在python2.x的环境下写的,而python3.x中好多函数和2.x中的名称或使用方法都不一样了,因此对原书中的内容需要校正,下面简单的记录一下学习过程中fix的部分 1.pr ...