JavaScript仿关机界面_层和布局特效

模板酷站
  •       3/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      JavaScript仿关机界面,其实是一个隐藏层、显示层的应用,用了一个布满小点的图片当作背景,你完全可以将图片更换为某一背景颜色,这样就完全是一个隐藏层的效果了。<html> <head> <title>JavaScript隐藏层、显示层仿关机界面</title> <script language="JavaScript"> <!-- function ShowLayer(foreID) { var backgroundIDWidth = document.body.clientWidth; var backgroundIDHeight = document.body.clientHeight; backgroundID.style.width = backgroundIDWidth; backgroundID.style.height = backgroundIDHeight; backgroundID.style.display = "block"; var foreTop = (backgroundIDHeight/2)-(parseInt(foreID.style.height)/2); var foreLeft = (backgroundIDWidth/2)-(parseInt(foreID.style.width)/2); foreID.style.top = foreTop; foreID.style.left = foreLeft; foreID.style.display = "block"; } function HiddenLayer(foreID) { backgroundID.style.display = "none"; foreID.style.display = "none"; } //--> </script> </head> <body> <input type="text" name=""> <input type="text" name=""> <input type="text" name=""> <div id="backgroundID" style="display:none;1122123<img src='http://p1.mb5u.com/texiao/3/20100522231348322.gif' _fcksavedurl='http://p1.mb5u.com/texiao/3/20100522231348322.gif'>2244234background:url('http://p1.mb5u.com/texiao/3/20100522231348322.gif');position:absolute;top:0px;left:0px;"></div> <div id="foreID" style="display:none;background-color:#FFFFE1;position:absolute;top:0px;left:0px;width:500px;height:400px;"><input type="button" value="隐藏层" onclick="javascript:HiddenLayer(foreID);"></div> <input type="button" value="显示层" onclick="javascript:ShowLayer(foreID);"> </body> </html>