类似Tip小提示的JS-弹出层
2011-08-02 10:50 三皮开发时 阅读(408) 评论(0) 编辑 收藏 举报
1.层默认none
<div id="showDiv" style="display:none;background-color:#8080ff;color:#fff;width:400;height:50">
</div>
</div>
2.列表显示
<%--作业表单名称--%>
<td align="left" onmousemove="showTip(this)" onmouseout="closeTip(this)" style="word-break:break-all" >
<td align="left" onmousemove="showTip(this)" onmouseout="closeTip(this)" style="word-break:break-all" >
3.JS方法
//在鼠标显示一个层,该层的内空为showDiv的内容
function showTip(obj){
var div3 = document.getElementById('showDiv'); //将要弹出的层
div3.style.display = "block"; //div3初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left = event.clientX + 10; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div3.style.top = event.clientY + 5;
div3.style.position = "absolute"; //必须指定这个属性,否则div3层无法跟着鼠标动
div3.innerText = obj.innerText;
div3.style.fontSize="20pt";
}
//关闭层showDiv的显示
function closeTip(obj){
var div3 = document.getElementById('showDiv');
div3.style.display = "none";
}
function showTip(obj){
var div3 = document.getElementById('showDiv'); //将要弹出的层
div3.style.display = "block"; //div3初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left = event.clientX + 10; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div3.style.top = event.clientY + 5;
div3.style.position = "absolute"; //必须指定这个属性,否则div3层无法跟着鼠标动
div3.innerText = obj.innerText;
div3.style.fontSize="20pt";
}
//关闭层showDiv的显示
function closeTip(obj){
var div3 = document.getElementById('showDiv');
div3.style.display = "none";
}