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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
js的三种继承方式详解
Jan 21 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
总结在前端排序中遇到的问题
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
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
php自定文件保存session的方法
2014/12/10 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
浅谈五大Python Web框架
2017/03/20 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
办公室岗位职责
2014/02/12 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL