鼠标放到控件上 DIV悬浮提示效果(四种)

<html>
<head>
<title>图像效果演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
//--初始化变量--
var rT=true;//允许图像过渡
var bT=true;//允许图像淡入淡出
var tw=150;//提示框宽度
var endaction=false;//结束动画
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
if(ns4||ns6||ie4)
{
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // hide
{
if(ns4)
{
toolTipSTYLE.visibility = "hidden";
}
else
{
//--图象过渡，淡出处理--
if (!endaction) {toolTipSTYLE.display = "none";}
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
if (rT){
if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
toolTipSTYLE.display = "none";}
}
if (bT){
if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
toolTipSTYLE.display = "none";}
}
if (!rT && !bT) toolTipSTYLE.display = "none";
//----------------------
}
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#eeeeee";
var content =
'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
'<table border="0" cellspacing="0" cellpadding="3" bgcolor="' + bg +
'"><td width=' + tw + '><font face="Arial" color="' + fg +
'" size="-2">' + msg +
' \;</font></td></table></td></table>';
if(ns4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
if(ns6)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
if(ie4)
{
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block'
//--图象过渡，淡入处理--
var cssopaction=document.all("msg1").filters[0].opacity
document.all("msg1").filters[0].opacity=0;
if (rT) document.all("msg1").filters[1].Apply();
if (bT) document.all("msg1").filters[2].Apply();
document.all("msg1").filters[0].opacity=cssopaction;
if (rT) document.all("msg1").filters[1].Play();
if (bT) document.all("msg1").filters[2].Play();
//----------------------
}
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
x = e.pageX;
y = e.pageY;
}
else
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}
</script>
<style  type="text/css">
<!--
.trans_msg
{
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
}
-->
</style>
</head>
<script>
</script>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<p>
<script>initToolTips()</script>
</p>
<p><font face="Arial"><a href="#" onMouseOver="toolTip('欢迎访问*****的blog<br>希望你喜欢这里<br>^_^')" onMouseOut="toolTip()">效果1</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip('你要吗，好好用的哦真的', '#FFFF00', 'red')" onMouseOut="toolTip()">效果2</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip('这是个好东东<br>你说呢<br>哈哈', '#FFFF00', 'orange')" onMouseOut="toolTip()">效果3</a></font>
<font face="Arial"> <a href="#" onMouseOver="toolTip('<marquee>跑啊!!跑</marquee>', '#FFFF00', 'orange')" onMouseOut="toolTip()">效果4</a></font>
</p>
</body>
</html>

鼠标放到控件上 DIV悬浮提示效果(四种)相关推荐

C#中，当鼠标移动到控件上，动态显示提示内容 - 用代码操作ToolTip
[背景] 写了个C#的小程序,其中在Settings窗体中有些配置参数,希望在鼠标移动到对应的配置选项上,动态显示相关的说明解释内容. [解决过程] 1.原先就已经知道,有些控件,是带ToolTipT ...
判断鼠标不在控件上_VB常用控件属性讲解单选按钮、复选框总结
1 单选按钮.复选框做为VB编程中的选择性控件,在实际程序中有着广泛的应用,所以熟练掌握其特殊属性的用法就很重要了! 单选按钮.复选框的实际应用图复选框(CheckBox)控件属性说明 Name ...
qt获取窗口的右上角位置_如何获得 Qt窗口部件在主窗口中的位置--确定鼠标是否在某一控件上与在控件上的位置...
用Qt Creator 设计程序时,最方便的就是ui设计器,可以很容易的得到想要的布局. 但是这样自动布局带来的后果是很难知道窗口中某一部件在主窗口中的相对位置. 在处理子窗口鼠标事件时变的很麻烦.主 ...
C# WinForm中获得当前鼠标所在控件或将窗体中鼠标所在控件名显示在窗体标题上...
转:/********************** * 课题:将窗体中鼠标所在控件名显示在窗体标题上 * 作者:ZAXX * QQ : 94027486 * 本课题可简单扩展:获取屏幕上鼠标所在 ...
鼠标在某个控件上按下，然后离开后弹起，如何捕获这个鼠标弹起事件
默认情况下当鼠标移出控件外部后控件将获取不到WM_LBUTTONUP消息. 以下通过SetCapture函数实现获取. SetCapture 函数功能: 该函数在属于当前线程的指定窗口里设置鼠标捕获. ...
c# 窗体控件上绘制跟随鼠标的十字线
一.技术路线 (1)以自定义大小的image为画布,绘制窗体控件显示的主题内容 public Image img=new Bitmap(250,250); //定义img Graphics gr ...
asp.net夜话之九：验证控件(上)
本篇要讲述的知识点如下: 数据验证介绍纯客户端脚本验证 asp.net验证控件概述 RequiredFieldValidator控件 CompareValidator控件 RangeVali ...
WPF编程，实现鼠标拖动控件并带有中间动效
一. 前提要实现鼠标对控件的拖拽移动,首先必须知道下面几点: WPF中的鼠标左键按下.鼠标移动事件,有时候通过XAML界面添加的时候并有没有作用,我们要通过触发事件的元素和要监听的路由事件绑定来进行 ...
SQL Server安装问题 mof 编译器无法连接到wmi服务器不能在控件上调用Invoke或 BeginInvoke...
谷歌后问题解决方法收集方法1. 出现错误后,找到注册表的 "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Man ...

鼠标放到控件上 DIV悬浮提示效果(四种)

鼠标放到控件上 DIV悬浮提示效果(四种)相关推荐

最新文章

热门文章