当前位置：首页 > 软件开发 > Web开发 > JavaScript

js javascript图层的弹出背景变灰和js图层的移动及相关资料

来源：岁月联盟编辑：exp 时间：2012-07-10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹层效果</title>
<script language="javascript">
function msgbox(){

//背景图层的生成块
var msg = document.createElement("div");
msg.id = "layer";
msg.innerHTML="<a href='http://www.baidu.com'> oh my gold is very good!</a>";
with(msg.style)
{
width = "100%";
height = document.documentElement.clientHeight + "px";
background = "#412572";
position = "absolute";
left = "0";
top = "0";
filter = 'Alpha(opacity=70)';//设置透明度
opacity = '0.7';//不透明度
}
document.body.appendChild(msg);

//以下是图片图层的运用

var alert=document.createElement("<div onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>");
alert.id="messgebox";
alert.innerHTML='<img src="baidu_sylogo1.gif" ondblclick="Hlose()" />';//不能用小写的close()否则将不识别 ;
with(alert.style)
{
position = "absolute";
left = "37%";
top = "30%";
width = "500px";
height = "500px";
}
document.body.appendChild(alert);//添加图层 div;
function Hlose()//清楚添加的两个div
{
document.body.removeChild(document.getElementById("layer"));
document.body.removeChild(document.getElementById("messgebox"));

}

//以下代码是图层的移动方法
var Obj;
function MouseDown(obj)
{
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
if(Obj!=null)
{
    Obj.style.left = event.x-Obj.l;
    Obj.style.top = event.y-Obj.t;
}
}
function MouseUp()
{
if(Obj!=null)
{
    Obj.releaseCapture();
    Obj=null;
}
}

/禁止键盘按F5刷新

document.onkeydown=function()
{
if(event.keyCode==116)
{
event.keyCode=0;
event.returnValue=false;
}
}

</script>
</head>

DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。

例如下面给div添加一个文本节点：

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，

不过innerHTML不属于DOM

2、removeChild(childreference)
移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

<div id="father"><div id="child">A child</div></div>

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

</script>

3、cloneNode(deepBoolean)

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如：<div id="adiv"><span id="innerspan">span</span></div><script type="text/javascript">var oldel=document.getElementById("innerspan");var newel=document.createElement("p");var text=document.createTextNode(“ppppp”);

newel.appendChild(text);

document.getElementById("adiv").replaceChild(newel, oldel);

</script>
5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

<body><span id="lovespan">熊掌我所欲也!</span></body><script type="text/javascript">var lovespan=document.getElementById("lovespan")var newspan=document.createElement("span")

var newspanref=document.body.insertBefore(newspan, lovespan)newspanref.innerHTML="鱼与";</script>

6、click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数

function wow() {

alert("我好象没有点鼠标啊");

}

</script>

var div = document.getElementById("test");

div.click();

</script>

DOM Element的属性:（下面是常用的。IE5.0以上,mozllia都支持的）

1、childeNodes返回所有子节点对象,

例如

<tr><td>一个和尚有水喝。</td></tr>

<tr><td>两个和尚挑水喝。</td></tr>

<tr><td>三个和尚没水喝。</td></tr>

</table>

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childNodes.length; i++){

var tr=mylist.childNodes[i];

for(j=0;j<tr.childNodes[j].length; j++) {

var td=tr.childNodes[j];

msg+=td.innerText;

}

alert(msg);

</script>

2、innerHTML
这是一个事实上的标准，不属于w3c DOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。

window.onload=function(){

document.getElementsByTagName("p")[0].innerHTML="<b>新新人类，什么？！</b>"

}

</script>

3、style
返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。

例如下面的脚本可以修改一个元素的背景色

document.getElementById("test").style.backgroundColor="yellow"

4、firstChild    返回第一个子节点
5、lastChild     返回最后一个子节点
6、parentNode   返回父节点的对象。
7、nextSibling   返回下一个兄弟节点的对象
8、previousSibling返回前一个兄弟节点的对象
9、nodeName返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如

if (document.getElementById("test").nodeName=="DIV")

alert("This is a DIV");

</script>

第一个例子：
使用DOM1.0 的javascript动态地创建一个HTML table。
<head>

<title>Sample code </title>

function start() {

//获得body的引用

var mybody=document.getElementsByTagName("body").item(0);

//创建一个<table></table>元素

mytable = document.createElement("TABLE");

//创建一个<TBODY></TBODY>元素

mytablebody = document.createElement("TBODY");

//创建行列

for(j=0;j<3;j++) {

//创建一个<TR></TR>元素

mycurrent_row=document.createElement("TR");

for(i=0;i<3;i++) {

//创建一个<TD></TD>元素

mycurrent_cell=document.createElement("TD");

//创建一个文本元素

currenttext=document.createTextNode("cell is row "+j+", column "+i);

//把新的文本元素添加到单元TD上

mycurrent_cell.appendChild(currenttext);

// appends the cell TD into the row TR

//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);

}

//把行TR添加到TBODY上

mytablebody.appendChild(mycurrent_row);

}

//把 TBODY 添加到 TABLE

mytable.appendChild(mytablebody);

mybody.appendChild(mytable)； //把mytable的border 属性设置为2 mytable.setAttribute("border","2"); }</script></head><body onload="start()"></body></html>

首先，我们创建一个table元素
接着，创建一个TBODY元素，它应该是TABLE元素的子元素，
但是现在现在它们之间没有联系。接着，使用一个循环创建TR元素，它们应该是TBODY元素的子元素。对于每一个TR，我们使用一个循环创建TD元素，它们是TR的子元素。
对于每一个TD，我们创建一个文本节点元素现在，我们创建好了这些TABLE, TBODY, TR, TD还有文本元素，但是它们之间的层级关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。mycurrent_cell.appendChild(currenttext);mycurrent_row.appendChild(mycurrent_cell);mytablebody.appendChild(mycurrent_row);mytable.appendChild(mytablebody);

作者：yhh345814509