您的位置:首页 > Web前端 > JavaScript

javascript 动态创建一个遮盖层

2013-07-04 17:34 190 查看
用javascript 动态创建一个遮盖层,当鼠标移动到上面动态创建出一个遮盖层,当鼠标离开时遮盖层不显示。

这个方法当屏幕滚动时,可以依然跟着鼠标显示!

function createTB() {
var tt = "<table border='1px' width='300px'><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr><tr><td>wwww</td><td>wwww</td><td>wwww</td></tr></table>";

var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX; //找到当前鼠标的位置的X坐标
var y = e.pageY || e.clientY + scrollY; //找到当前鼠标的位置的Y坐标

openNewDiv(tt, "block", x,y);

}

var docEle = function () {
return document.getElementById(arguments[0]) || false;
}
//mask遮罩层
function openNewDiv(tabled, displays,x,y) {
var m = "mask";
if (docEle(m)) document.body.removeChild(docEle(m));

var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
//newMask.style.zIndex = "1";

newMask.style.width = "200px";
//newMask.style.height = (_scrollHeight - 20) + "px";

var e = event || window.event;

newMask.style.top = y + "px";
newMask.style.left =x + "px";
newMask.style.background = "#e8e8e8";

if (displays == "block") {
newMask.style.display = "block";
}
else {

newMask.style.display = "none";
}

newMask.innerHTML = tabled;

document.body.appendChild(newMask);

}

<input type="button" value="create" onmousemove="createTB()" onmouseleave="createTBs()" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: