javascript弹出带文字信息的提示框效果


Posted in Javascript onJuly 19, 2016

本文实例讲述了javascript弹出带文字信息的提示框效果。分享给大家供大家参考,具体如下:

tooltips.js:

// position of the tooltip relative to the mouse in pixel //
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.getElementByIdx && document.all);
var ns6 = (document.getElementByIdx && !document.all);
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function getmouseposition(e)
{
  if(document.getElementByIdx)
  {
    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.getElementByIdx('tooltip');
    lixlpixel_tooltip.style.left =(mousex+pagex+offsetx) + 'px';
 lixlpixel_tooltip.style.top =(mousey+pagey+offsety) + 'px';
  }
}
function tooltip(tip)
{
  if(!document.getElementByIdx('tooltip')) newelement('tooltip');
  var lixlpixel_tooltip = document.getElementByIdx('tooltip');
  lixlpixel_tooltip.innerHTML = tip;
  lixlpixel_tooltip.style.display = 'block';
  document.onmousemove = getmouseposition;
}
function exit()
{
  document.getElementByIdx('tooltip').style.display = 'none';
}

test.html

<html>
<head>
<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" src='tooltips.js'>
</script>
</HEAD>
<BODY>
<div onmouseover="tooltip('如果你添加的是一个播客(Podcast),请选中此复选框。');"onmouseout="exit();">蝶恋花</div>
</BODY>
</HTML>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
总结在前端排序中遇到的问题
Jul 19 #Javascript
ECMAScript6快速入手攻略
Jul 18 #Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 #Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 #Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 #Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 #Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python画微信表情符的实例代码
2019/10/09 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python super()函数的基本使用
2020/09/10 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
2014年党员公开承诺书范文
2014/03/28 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
幸福终点站观后感
2015/06/04 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
python基础之错误和异常处理
2021/10/24 Python