javascript弹出带文字信息的提示框效果
// position of the tooltip relative to the mouse in pixel //
<html>
<head>
<meta charset="utf-8">
<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
var offsetx = 12;
var offsety = 8;
function newelement(newid)
{
if(document.createElement)
{
var el = document.createElement('div');
el.id = newid;
with(el.style)
{
display = 'none';
position = 'absolute';
}
el.innerHTML = ' ';
document.body.appendChild(el);
}
}
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function getmouseposition(e)
{
if(document.getElementById)
{
var iebody=(document.compatMode &&
document.compatMode != 'BackCompat') ?
document.documentElement : document.body;
pagex = (isapple == 1 ? 0:(ie5)?iebody.scrollLeft:window.pageXOffset);
pagey = (isapple == 1 ? 0:(ie5)?iebody.scrollTop:window.pageYOffset);
mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;
var lixlpixel_tooltip = document.getElementById('tooltip');
lixlpixel_tooltip.style.left =(mousex+pagex+offsetx) + 'px';
lixlpixel_tooltip.style.top =(mousey+pagey+offsety) + 'px';
}
}
function tooltip(tip)
{
if(!document.getElementById('tooltip')) newelement('tooltip');
var lixlpixel_tooltip = document.getElementById('tooltip');
lixlpixel_tooltip.innerHTML = tip;
lixlpixel_tooltip.style.display = 'block';
document.onmousemove = getmouseposition;
}
function exit()
{
document.getElementById('tooltip').style.display = 'none';
}
</script>
</HEAD>
<BODY>
<div onmouseover="tooltip('如果你添加的是一个播客(Podcast),请选中此复选框。');"onmouseout="exit();">蝶恋花</div>
</BODY>
</HTML>
javascript弹出带文字信息的提示框效果的更多相关文章
- WPF弹出带蒙板的消息框
效果图 思路 拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// <summary> /// 弹出 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- JavaScript弹出窗口方法
本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...
- 练习:javascript弹出框及地址选择功能,可拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- 基于JQuery 的消息提示框效果代码
提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...
- 单一按钮显示/隐藏&&提示框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 分布式消息通信之RabbitMQ_02
目录 1. 可靠性投递分析 1.1 消息投递 1.2 消息路由 1.3 消息存储 1.4 消息消费 1.5 其他 2. 高可用架构部署方案 2.1 集群 2.2 镜像 3. 经验总结 3.1 配置文件 ...
- 线上Storm的worker,executor,task参数调优篇
问题引入: 线上最近的数据量越来越大,出现了数据处理延迟的现象,观察storm ui的各项数据,发现有大量的spout失败的情况,如下: ------------------------------- ...
- 【leetcode算法-简单】13. 罗马数字转整数
[题目描述] 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列 ...
- 利用css 画各种三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: ...
- vim bundle安装
一.准备工作 安装Git(因为下面我们选择的插件管理器需要使用到它)安装其他插件前首先需要选择一个Vim插件管理器,我这里选择的是Vundle,Vundle的工作过程中需要通过Git自动从远程创库同步 ...
- 在win7中解决Visual C++ 6.0打开文件时出现停止工作问题
在使用Visual C++ 6.0打开文件时可能会出现下面的情况 这可能是Vc6.0和win7兼容性问题. 方法: 下载filetool即可 链接:https://pan.baidu.com/s/1X ...
- Go语言学习之斐波那契数列的测试例子和定义常量方法
### Go语言学习之斐波那契数列的测试例子和定义常量方法 1.go语言中测试文件必须以test.go结尾,比如:fib_test.go 2.测试文件内的方法必须是Test开头,比如:func Tes ...
- 关于python中的包,模块导入的问题详解(一)
最近由于初学python,对包,模块的导入问题进行了资料的搜集,查阅,在这里做一个总结: 一: import 模块 在import的过程中发生了什么?我们用一个实验来说明: 以上截图表明:在impor ...
- linux命令自动补全
在linux中命令较长时,不易记忆,使用命令行自动补全,使用方便,配置方法记录如下 需要安装bash-completion 重启后生效 命令:yum install bash-completion,安 ...
- java7:核心技术与最佳实践读书笔记——类加载
流程:class -> 加载 -> jvm虚拟机 -> 链接 . 一.类加载器概述 1.引出 类加载器也是一个java类,java.lang.ClassLoader类是所 ...