您的位置：首页 > 其它

鼠标onmousemove 到控件上，显示提示信息！

2009-06-29 10:55 351 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script language="javascript">
var width = "80";
var height = ""
//设置层显示坐标
var offsetx = 2;
var offsety = 16;
var x = 0;
var y = 0;
var show = false;//判断是否显示层
var dStyle;//设置层的样式
document.onmousemove = mEvn;//作用重绘 document.onmousemove获取窗体的所有鼠标移动事件

//鼠标移动到目标对象上显示提示该方法只会在鼠标移动到目标对象上时只执行一次之后转到 mEvn()执行该函数中的内容
function mOvr() {
dStyle = detail.style;//获取层的样式对象
var obj = window.event.srcElement;//获取触发事件的对象
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "background-color:#C0D0E8";
}
var s;//提示的内容
s = "这里写你要提示的信息！";
//document.all["detail"].innerHTML = s; //document.all["detail"]返回对象所包含id为detail的元素集合的引用。
detail.innerHTML = s;
if(show == false){
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}
if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}

dStyle.visibility = "visible";
show = true;
}

}
//鼠标移开触发该事件该方法只会在鼠标移走目标对象上时只执行一次
function mOut() {
var obj = window.event.srcElement;
if (obj.nodeName == "FONT") {
obj.runtimeStyle.cssText = "";
}
show = false;
dStyle.visibility = "hidden";
}
//整个窗体上的移动事件都将执行该方法
function mEvn() {
x = event.x;
y = event.y;
if (document.body.scrollLeft) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
if (show) {
if((x + offsetx)<40){
dStyle.left = x + offsetx;
}else if((x + offsetx+(width/2))>250){
dStyle.left = x + offsetx - (width);
}else{
dStyle.left = x + offsetx - (width/2);
}

if((y + offsety+height)>280){
dStyle.top = y + offsety - height;
}else{
dStyle.top = y + offsety;
}
}
}
/*
//下面俩个只是测试用的
function test1(){
alert(test.value);//可以直接通过id名称来调用一个对象其功能相当于 document.getElementById("test");
}
function test2(){
for(i = 0; i < document.all.length; i++){//获取页面所有元素包含隐藏的元素
alert(document.all(i).tagName);
}
}*/
</script>
</head>
<body onload="">
<div id="detail" style="POSITION: absolute" title="ddd"></div>
<table>
<tr>
<td onMouseOver="mOvr()" onMouseOut="mOut()" style="cursor:hand">
提示信息
</td>
<td><input type="text" value="22" id="test" /> <font onMouseOver="mOvr()" onMouseOut="mOut()">测试</font></td>
</tr>
</table>
</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航