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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
php数据访问之增删改查操作
2016/05/09 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
从0开始学Vue
2016/10/27 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python开发之list操作实例分析
2016/02/22 Python
python中map()与zip()操作方法
2016/02/27 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python socket处理client连接过程解析
2020/03/18 Python
python读取mysql数据绘制条形图
2020/03/25 Python
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
50道外企软件测试面试题
2014/08/18 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
警察思想汇报
2014/01/04 职场文书
妇产医师自荐信
2014/01/29 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
设计师求职信
2014/07/01 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
人力资源部岗位职责
2015/02/11 职场文书