首页 > 代码库 > 折叠菜单及登陆锁屏特效
折叠菜单及登陆锁屏特效
<title>折叠菜单</title> <script type="text/javascript" src="http://www.mamicode.com/dtree.js"></script> </head> <script type="text/javascript"> //dtree 目录树结构 var d = new dTree("d"); d.add(0,-1,"根目录"); d.add(1,0,"一级目录1"); d.add(2,0,"一级目录2"); d.add(3,0,"一级目录3"); d.add(4,0,"一级目录4"); d.add(5,2,"二级目录2"); d.add(6,4,"二级目录4"); d.add(7,4,"二级目录4"); d.add(8,7,"三级目录4"); d.add(9,8,"demo站点 登陆锁屏效果","demo.html"); document.write(d); </script> <body> <br /> <a href="javascript:d.openAll()">展开全部</a> || <a href="javascript:d.closeAll()">折叠全部</a> </body> <title>登陆锁屏效果</title> </head> <script type="text/javascript"> function sAlert(str){ //alert(str); //创建遮罩层 var bgObj = document.createElement("div"); bgObj.id = "div1"; bgObj.style.position = "absolute"; //定位 bgObj.style.top = "0"; //距离顶部的距离 bgObj.style.left = "0"; //距离左边的距离 ,与上面2行一起完成全屏遮罩 bgObj.style.border = "1px solid #f00"; //边框 bgObj.style.background = "#44eeff"; //背景色 //bgObj.style.width = "100%"; //宽度的另一种表示方式 bgObj.style.width = document.body.offsetWidth+"px"; //bgObj.style.height = "100%"; //高度的另一种表示方式 bgObj.style.height = screen.height+"px"; //alert(bgObj.style.width); //alert(bgObj.style.height); bgObj.style.opacity = "0.1"; //IE9 firefox 下的透明度设置 bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; // ie 低版本下的代码 bgObj.style.zIndex = 1000; // 层的堆叠顺序,序号大的,就堆叠在上面 document.body.appendChild(bgObj); //创建弹窗框 var mObj = document.createElement("div"); //alert(mObj); mObj.id = "div2"; //边框 大小 mObj.style.border = "1px solid #ff0000"; mObj.style.width = "450px"; mObj.style.height = "250px"; mObj.style.background = "#efefef"; //定位 mObj.style.position = "absolute"; mObj.style.top = "35%"; mObj.style.left = "30%"; //堆叠顺序 mObj.style.zIndex = 1001; document.body.appendChild(mObj); //添加消息层 -- 关闭按钮执行动作层 var title = document.createElement("h3"); title.id = "title"; title.align = "right"; title.innerHTML = "关闭"; title.style.border = "1px solid #dfdffd"; title.style.background = "#c5c5c5"; title.style.margin = "0"; //定位距离消息框顶部的距离 title.onclick = function(){ //alert(11212); document.body.removeChild(bgObj); //先删除背景遮罩层对象 mObj.removeChild(title); // 再删除本消息层对象 document.body.removeChild(mObj); //最后删除弹窗框对象 } mObj.appendChild(title); //最后子啊消息层里添加页面内容 var pInfo = document.createElement("p"); pInfo.align = "center"; //添加内容 pInfo.innerHTML = "这里是你的网页代码<br /><br />"; pInfo.innerHTML += "用户名:<input type=‘text‘ name=‘username‘><br />"; pInfo.innerHTML += "密 码:<input type=‘password‘ name=‘password‘><br /><br />"; pInfo.innerHTML += "<input type=‘submit‘ name=‘submit‘ value=http://www.mamicode.com/‘体交呗‘>"; mObj.appendChild(pInfo); } </script> <body> 这里是JS 登陆效果的DEMO 页面<br /> <h3><a href="http://www.baidu.com">点我百度一下</a></h3><br /> <input type="button" value="http://www.mamicode.com/打开遮罩层后就不能点击了" onclick="sAlert(‘测试弹出框并加上锁屏效果‘)" /><br /><br /> <a href="http://www.mamicode.com/index.html">返回首页</a> </body>
本文出自 “方向感” 博客,请务必保留此出处http://itech.blog.51cto.com/192113/1562102
折叠菜单及登陆锁屏特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。