<!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> <title>无标题页</title> </head> <mce:script type="text/javascript"><!-- function creal2(objs) { var obj=document.getElementById("Layer1"); var mydiv=document.createElement("div"); mydiv.setAttribute("id","Layer2") mydiv.style.cssText="left:0px;background-color:#9932CC;border:1px #9932CC solid;z-index:2;position:absolute;height:"+obj.style.height+";top:-"+obj.style.height+";width:"+obj.style.width; obj.appendChild(mydiv); } function creal4(objs) { var obj=document.getElementById(objs); var mydiv=document.createElement("div"); mydiv.setAttribute("id","Layer4") var tops=parseInt(obj.style.height)+"px"; mydiv.style.cssText="left:0px;background-color:#FF1493 ;border:1px #FF1493 solid;position:absolute;z-index:2;height:"+obj.style.height+";top:"+tops+";width:"+obj.style.width; obj.appendChild(mydiv); } function creal3(objs) { var obj=document.getElementById(objs); var mydiv=document.createElement("div"); mydiv.setAttribute("id","Layer3") mydiv.style.cssText="left:0px;background-color:#EEEE00;border:1px #EEEE00 solid;position:absolute;z-index:2;height:"+obj.style.height+";top:0px;width:"+obj.style.width; obj.appendChild(mydiv); creal2(objs); creal4(objs); } var ii=0; var iii=0; function moveup() { if(iii==0) { if(parseInt(document.getElementById("Layer3").style.top)>-(parseInt(document.getElementById("Layer3").style.height))) { document.getElementById("Layer3").style.top=parseInt(document.getElementById("Layer3").style.top)-4+"px"; if(parseInt(document.getElementById("Layer4").style.top)>=0) { document.getElementById("Layer4").style.top=parseInt(document.getElementById("Layer4").style.top)-4+"px"; } setTimeout(moveup,0); ii=1; } else { var div2=document.getElementById("Layer2"); var div3=document.getElementById("Layer3"); var div4=document.getElementById("Layer4"); var div1=document.getElementById("Layer1"); div1.removeChild(div2); div3.setAttribute("id","Layer2"); div4.setAttribute("id","Layer3"); creal4("Layer1"); ii=0; return ; } } } function movedown() { if(ii==0) { if(parseInt(document.getElementById("Layer3").style.top)<parseInt(document.getElementById("Layer3").style.height)) { document.getElementById("Layer3").style.top=parseInt(document.getElementById("Layer3").style.top)+4+"px"; document.getElementById("Layer2").style.top=parseInt(document.getElementById("Layer2").style.top)+4+"px"; setTimeout(movedown,0); iii=1; } else { var div2=document.getElementById("Layer2"); var div3=document.getElementById("Layer3"); var div4=document.getElementById("Layer4"); var div1=document.getElementById("Layer1"); div1.removeChild(div4); div3.setAttribute("id","Layer4"); div2.setAttribute("id","Layer3"); creal2("Layer1"); iii=0; return ; } } } //注意使用层需要加 position:absolute; overflow:hidden; 方有效果。 //其中ID可以变动但是最好不好变动。 //实例:<div id="Layer1" style="width: 730px; height: 160px; border:0px red solid; position:absolute;text-align:center; //overflow:hidden; "> </div> //没有写太多的注释大家慢慢研究相信会对你有所启发的。 // --></mce:script> <body οnlοad="creal3('Layer1');creal4('Layer1')"> <div id="Layer1" style=" position:absolute; width:492px; height:129px; overflow:hidden;border:1px red solid;left:200px; top:300px;"> </div> <input name="" type="button" value="↑" οnclick="moveup()"> <input name="" type="button" value="↓"οnclick="movedown()"> </body> </html>
javascript实现层上下移动
最新推荐文章于 2022-06-24 09:24:41 发布
1699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
