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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
用javascript实现读取txt文档的脚本
Jul 20 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
详解package.json版本号规则
Aug 01 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
如何封装Vue Element的table表格组件
Feb 06 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP脚本的10个技巧(5)
2006/10/09 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
Python最基本的输入输出详解
2015/04/25 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python pandas模块基础学习详解
2019/07/03 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
优秀学生干部推荐材料
2014/02/03 职场文书
大学生就业意向书范文
2014/04/01 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
一个独生女的故事观后感
2015/06/04 职场文书