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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
js实现表格字段排序
Feb 19 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP操作Redis常用技巧总结
2018/04/24 PHP
学习ExtJS form布局
2009/10/08 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js日历功能对象
2012/01/12 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python实现kmp算法的实例代码
2019/04/03 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
浅谈Python 参数与变量
2020/06/20 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Java基础面试题
2012/11/02 面试题
清洁工岗位职责
2014/01/29 职场文书
学校师德承诺书
2014/05/23 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL