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键盘
May 02 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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 编写的 25个游戏脚本
2009/05/11 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
详解php反序列化
2020/06/10 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python 性能优化方法小结
2017/03/31 Python
Python的时间模块datetime详解
2017/04/17 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python 经典数字滤波实例
2019/12/16 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
事业单位辞职信范文
2014/01/19 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
成立公司计划书
2014/05/07 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
python实现Thrift服务端的方法
2021/04/20 Python