javascript遮照层效果_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:44:21

javascript遮照层效果_javascript技巧

javascript遮照层效果_javascript技巧:想了想,还是发出来吧.虽然面向对象还不是很明白. * { padding:0; margin:0; list-style:none; } html{ height:100%;} body { font-family:Verdana, Geneva, sans-serif; font-size:14px;height:100

推荐度：

点击下载本文 文档为doc格式

导读javascript遮照层效果_javascript技巧:想了想,还是发出来吧.虽然面向对象还不是很明白. * { padding:0; margin:0; list-style:none; } html{ height:100%;} body { font-family:Verdana, Geneva, sans-serif; font-size:14px;height:100

想了想,还是发出来吧.虽然面向对象还不是很明白.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
* { padding:0; margin:0; list-style:none; } 
html{ height:100%;}

body { font-family:Verdana, Geneva, sans-serif; font-size:14px;height:100%; line-height:26px; }

#wrap { width:960px; margin:0 auto; height:auto; }

#divId_no_click { position:absolute; display:none; top:0; left:0; width: 100%; height:100%; background-color: #555; z-index: 9999; filter: alpha(opacity=10); opacity:0.3; } 
</style> 
</head> 
<body> 
OK 
 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
}

}; 
$("ok").onclick = function() { 
 
Class.bint("divId_no_click"); 
} 
window.onresize = function() { 
Class.res("divId_no_click","wrap"); 
} 
Class.x(10,"wrap"); 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
还可以把上篇文章的弹出层居中效果的制作和本例一起加个

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="author" content="Stri" /> 
<title></title> 
<style type="text/css"> 
* { padding:0; margin:0; list-style:none; } 
#a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:999999; } 
a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } 
a:hover { background-color:#333; color:#fff; font-weight:bold; } 
html { height:100%; } 
body { font-family:Verdana, Geneva, sans-serif; font-size:14px; height:100%; line-height:26px; } 
#wrap { width:960px; margin:0 auto; height:auto; } 
#divId_no_click { position:absolute; display:none; top:0; left:0; width: 100%; height:100%; background-color: #555; z-index: 9999; filter: alpha(opacity=10); opacity:0.3; } 
#aa { position:fixed; bottom:20px; right:10px; } 
</style> 
<script language="javascript" type="text/javascript"> 
var drg=true; 
var ns=(document.all) ? false : true; 
function divcenter() 
{remove(); 
var c=document.createElement("div"); 
document.body.appendChild(c); 
c.setAttribute("id","a"); 
 c.setAttribute("dragable","dragable"); 
 c.onmousedown=foo; 
 var divId=document.getElementById("a"); 
 divId.innerHTML+="出现代码异常!<br>错误编号:0015;"; 
//divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+document.documentElement.scrollLeft+"px"; 
//setTimeout(function(){divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+document.documentElement.scrollTop-50+"px";},100); 
h_w(300,80); 
} 
//移除 
function remove(){ 
 if(document.getElementById("a")) 
 {document.body.removeChild(document.getElementById("a")); 
 }} 
 
function foo(){ 
 if(drg){ 
 if(document.getElementById("a")!=null) 
 { 
 obj=document.getElementById("a"); 
 document.onmousedown=m_d; 
 document.onmouseup=m_u; 
 } 
 } 
 else 
 { 
 
 document.onmousemove=no_f; 
 document.onmousedown=no_f; 
 document.onmouseup=no_f; 
 } 
} 
function m_d(e){ 
 document.onmousemove=m_m; 
 x=(ns)?e.pageX:event.x; 
 y=(ns)?e.pageY:event.y; 
 cx=obj.offsetLeft-x; 
 cy=obj.offsetTop-y; 
 
 } 
function m_m(e){ 
 
 drg=false; 
 x=(ns)?e.pageX:event.x; 
 y=(ns)?e.pageY:event.y; 
 obj.style.left=(cx+x)+"px"; 
 obj.style.top=(cy+y)+"px"; 
 
 } 
function m_u(){ 
 drg=true; 
 document.onmousedown=no_f; 
 document.onmousemove=no_f; 
 document.onmouseup=no_f; 
 } 
function no_f(){ 
 return false;} 
 
 function h_w(a,b){ 
 divId=document.getElementById("a"); 
 divId.style.width="0px"; 
 divId.style.height="0px"; 
 var s=function(){ 
 var w=parseInt(divId.style.width); 
 if(w 
</head> 
<body> 
 
提交 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
} 
var Class = { 
min_w:960, 
bint: function(r) { 
$(r).style.display = "block"; 
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
 $(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
}, 
x: function(r,d) { 
for (i = 1; i < r; i++) { 
var c = document.createElement("div"); 
c.innerHTML = i; 
$(d).appendChild(c); 
} 
}, 
res: function(r,wr) { 
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px"; 
 $(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px"; 
} 
}; 
$("aa").onclick = function() { 
 divcenter(); 
Class.bint("divId_no_click"); 
} 
window.onresize = function() { 
Class.res("divId_no_click","wrap"); 
} 
Class.x(100,"wrap"); 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
主要代码:
代码如下:
var Class = {
min_w:960,
bint: function(r) {
$(r).style.display = "block";
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px";
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px";
},
x: function(r,d) {
for (i = 1; i < r; i++) {
var c = document.createElement("div");
c.innerHTML = i;
$(d).appendChild(c);
}
},
res: function(r,wr) {
$(r).style.width = Math.max(parseInt(document.body.offsetWidth),Class.min_w)+"px";
$(r).style.height =Math.max(parseInt(document.documentElement.scrollHeight),parseInt(document.documentElement.offsetHeight))+ "px";
}
};

javascript遮照层效果_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：技巧 js 效果

热门焦点

javascript遮照层效果_javascript技巧

javascript遮照层效果_javascript技巧

javascript遮照层效果_javascript技巧

最新推荐

猜你喜欢

热门推荐