JavaScript实现简单Tip提示框效果


Posted in Javascript onApril 20, 2016

本文实例讲述了JavaScript实现简单Tip提示框效果。分享给大家供大家参考,具体如下:

// JavaScript Document
document.write("<div id='tip' style='position:absolute; width:300px; z-index:1; background-color: #ffffff; border: 1px solid gray; overflow: visible;visibility: hidden;font-size:12px;padding:12px;color:#333333'></div>")
function showtip(w){
 var x=event.x;
 var y=event.y;
 tip.innerHTML=w;
 tip.style.visibility="visible";
 tip.style.left=x+10;
  tip.style.pixelTop=y+document.body.scrollTop+10;
}
function hidetip(){
 tip.style.innerHTML=""
 tip.style.visibility="hidden";
}

以上另存为: showtip.js

<table width="100%" border="0" cellspacing="0" cellpadding="0" background="#F7F7F0">
<tr height="25">
<td background="images/line-dot.gif" height="20" align="left"><IMG height="5" src="images/dot2.gif" width="5">
<a 
 onmousemove="showtip('<b>标题:</b><br>毕业女生 自信更在包装外<br>')" 
 onmouseout=hidetip() 
 href='Common/NewsDetails.aspx?id=1035'
 target=_blank>
 毕业女生 自信更在包装外
 </a>
</td>
</tr>
<tr>
<td background="images/point_h.gif" height="1"></td>
</tr>
</table>

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

Javascript 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 #Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
You might like
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Swiper实现轮播图效果
2017/07/03 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
python 开发的三种运行模式详细介绍
2017/01/18 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Django实现表单验证
2018/09/08 Python
python os模块简单应用示例
2019/05/23 Python
Django REST framwork的权限验证实例
2020/04/02 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
国培教师自我鉴定
2014/02/12 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
常务副总经理任命书
2014/06/05 职场文书
专题组织生活会方案
2014/06/15 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
考研导师推荐信范文
2015/03/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书