javascript 遮照层效果

174 阅读 0 评论 115 点赞

我是靠谱客的博主欣慰大船，最近开发中收集的这篇文章主要介绍javascript 遮照层效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

[Ctrl+A 全选注:如需引入外部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> 
<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> 
 
</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"; 
} 
};