浏览 2558 次
锁定老帖子 主题:div层上显示提示信息
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-02-20
最后修改:2009-02-20
<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 = "<table border=\"1\" width=\"80\" id =\"tip\" bordercolor=\"#C7D0D2\" bgcolor=\"#ffffff\" cellpadding=\"0\" cellspacing=\"0\"><TR><td>" + "<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>提示信息</TABLE></TABLE>"; //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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |