js javascript图层的弹出 背景变灰 和js图层的移动 及相关资料
<!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>
<body>
<div style="text-align:center;margin-top:20%;">
<input type="button" value="显示" onclick="msgbox()" />
</div>
</body>
</html>
DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点：
<div id="test"></div>
<script type="text/javascript">
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>
<script type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。
<p id=”mypara”>11111</p>
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函数
<script>
function wow() {
alert("我好象没有点鼠标啊");
}
</script>
<div id="test" onclick='wow()'>hhh</div>
<script type="text/javascript">
var div = document.getElementById("test");
div.click();
</script>
DOM Element的属性:（下面是常用的。IE5.0以上,mozllia都支持的）
1、childeNodes返回所有子节点对象,
例如
<table id="mylist">
<tr><td>一个和尚有水喝。</td></tr>
<tr><td>两个和尚挑水喝。</td></tr>
<tr><td>三个和尚没水喝。</td></tr>
</table>
<script>
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。
<p><b>新人类，什么？！</b></p>
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>新新人类，什么？！</b>"
}
</script>
3、style
返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。
例
补充：web前端 , JavaScript ,
