JQuery遮罩层

gz-vps · 发表于 2011-8-27 10:50

以下是截图： ......
Javascript......
BoneWG写道 J......
谢谢你的建议......
以下这个更好 Jav......
document.d......
int08h写道 d......
楼主，您这截图.........
(*^__^*)嘻嘻......
楼主v5,我经常用$......

以下是截图：

代码：

Js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <TITLE>遮罩层效果</TITLE>
<style type="text/css">
      .mask {
         padding : 0px ;
         margin : 0px ;
         background : #555 ;
         position : absolute ;
      }
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
      $(function(){
         Mask.load() ;
      }) ;

      var Mask = function(){
         function load(){
            var jq = _render() ;
            $("body").click(function(){
                  unload(jq) ;
            }) ;
         } ;
         function unload(jq){
            jq.remove() ;
         } ;
         function _render(){
            var _div = $("<div></div>")
                              .addClass("mask")
                              .appendTo("body") ;
            var _css = _getCss() ;
            _div
                  .css(_css)
                  .fadeIn() ;
            return _div ;
         } ;
         function _getCss(){
            var css = {
                  display : "none" ,
                  top : 0 +  "px" ,
                  left : 0 + "px" ,
                  width : document.documentElement.clientWidth + "px" ,
                  height : document.documentElement.clientHeight + "px" ,
                  zIndex : 9999 ,
                  opacity : 0.6
            } ;
            return css ;
         } ;
         return {
            load : load ,
            unload : unload
         } ;
      }() ;
</script>
</HEAD>

<BODY>

</BODY>
</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <TITLE>遮罩层效果</TITLE>
<style type="text/css">
.mask {
padding : 0px ;
margin : 0px ;
background : #555 ;
position : absolute ;
}
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
Mask.load() ;
}) ;

var Mask = function(){
function load(){
var jq = _render() ;
$("body").click(function(){
unload(jq) ;
}) ;
} ;
function unload(jq){
jq.remove() ;
} ;
function _render(){
var _div = $("<div></div>")
.addClass("mask")
.appendTo("body") ;
var _css = _getCss() ;
_div
.css(_css)
.fadeIn() ;
return _div ;
} ;
function _getCss(){
var css = {
display : "none" ,
top : 0 +  "px" ,
left : 0 + "px" ,
width : document.documentElement.clientWidth + "px" ,
height : document.documentElement.clientHeight + "px" ,
zIndex : 9999 ,
opacity : 0.6
} ;
return css ;
} ;
return {
load : load ,
unload : unload
} ;
}() ;
</script>
</HEAD>

<BODY>

</BODY>
</HTML>

hxy · 发表于 2011-8-27 10:50

Javascript代码
$(function(){
$('<div></div>',{
      id:'mask',
      css:{
         width

(document).width(),
height

(document).height(),
         position:'absolute',
         background:'#000',
         left:0,
         top:0
      }
}).appendTo('body').fadeTo('fast',0.6).click(function(){$(this).fadeOut()})
})

$(function(){
$('<div></div>',{
id:'mask',
css:{
width

(document).width(),
height

(document).height(),
position:'absolute',
background:'#000',
left:0,
top:0
}
}).appendTo('body').fadeTo('fast',0.6).click(function(){$(this).fadeOut()})
})

天上智喜 · 发表于 2011-8-27 10:51

BoneWG 写道
Javascript代码
$(function(){
$('<div></div>',{
      id:'mask',
      css:{
         width

(document).width(),
height

(document).height(),
         position:'absolute',
         background:'#000',
         left:0,
         top:0
      }
}).appendTo('body').fadeTo('fast',0.6).click(function(){$(this).fadeOut()})
})

$(function(){
$('<div></div>',{
id:'mask',
css:{
width

(document).width(),
height

(document).height(),
position:'absolute',
background:'#000',
left:0,
top:0
}
}).appendTo('body').fadeTo('fast',0.6).click(function(){$(this).fadeOut()})
})

无法运行的话请使用jquery1.4以上版本,或者前往http://yu123.me/2010/12/jquery-ad-plugins/查看jquery分体广告插件详细介绍

紫衿 · 发表于 2011-8-27 10:51

谢谢你的建议

木已 · 发表于 2011-8-27 10:51

以下这个更好
Java代码
$.showad=function(src,width,height,num,top,distance){
var i,m,l,t;
var dw=width/num;
height=height/2;
distance=distance/2;
var left=($(document).width()-width)/(num+1);
var leftl=left*(num+1)/2;
var $l=new Array();
var $t=new Array();
$('html,body').animate({scrollTop: 0});
$('<div></div>',{
      id:'hBg',
      css:{
         width:'100%',
         height

(document).height(),
         background:'#000',
         display:'none',
         position:'absolute',
         left:0,
         top:0,
         zIndex:998
      }
}).appendTo('body').fadeTo("slow", 0.8,function(){
      for(i=0;i<2;i++){
         for(m=0;m<num;m++){
            l=left*(m+1)+dw*m;
            t=top-distance+i*(height+2*distance);
            $('<div></div>',{
                  id:'adb'+(m+i*num),
                  width:dw,
                  height:height,
                  css:{
                     position:'absolute',
                     background:'#000 url(\''+src+'\') no-repeat '+m*(-dw)+'px '+(-i*height)+'px',
                     display:'none',
                     zIndex:'999',
                     left:l,
                     top:t
                  }
            }).appendTo('body').animate({left:leftl+dw*m,top:top+height*i,opacity:'show'},'slow');
            $l.push(l);
            $t.push(t);
         }
      }
}).click(function(){
      num=num*2;
      for(i=0;i<num;i++){
         $('#adb'+i).stop().animate({left

l[i],top

t[i],opacity:'hide'},'1000',function(){
            $(this).remove();
         });
      }
      $(this).remove();
})
}

$.showad=function(src,width,height,num,top,distance){
var i,m,l,t;
var dw=width/num;
height=height/2;
distance=distance/2;
var left=($(document).width()-width)/(num+1);
var leftl=left*(num+1)/2;
var $l=new Array();
var $t=new Array();
$('html,body').animate({scrollTop: 0});
$('<div></div>',{
id:'hBg',
css:{
width:'100%',
height

(document).height(),
background:'#000',
display:'none',
position:'absolute',
left:0,
top:0,
zIndex:998
}
}).appendTo('body').fadeTo("slow", 0.8,function(){
for(i=0;i<2;i++){
for(m=0;m<num;m++){
l=left*(m+1)+dw*m;
t=top-distance+i*(height+2*distance);
$('<div></div>',{
id:'adb'+(m+i*num),
width:dw,
height:height,
css:{
position:'absolute',
background:'#000 url(\''+src+'\') no-repeat '+m*(-dw)+'px '+(-i*height)+'px',
display:'none',
zIndex:'999',
left:l,
top:t
}
}).appendTo('body').animate({left:leftl+dw*m,top:top+height*i,opacity:'show'},'slow');
$l.push(l);
$t.push(t);
}
}
}).click(function(){
num=num*2;
for(i=0;i<num;i++){
$('#adb'+i).stop().animate({left

l[i],top

t[i],opacity:'hide'},'1000',function(){
$(this).remove();
});
}
$(this).remove();
})
}

北大青鸟 · 发表于 2011-8-27 10:51

document.documentElement.clientWidth改成$(window).width()吧，jQuery还是有其他的考虑的
这截图太生猛了……

醉倚西风 · 发表于 2011-8-27 10:51

int08h 写道
document.documentElement.clientWidth改成$(window).width()吧，jQuery还是有其他的考虑的
这截图太生猛了……

呵呵见笑了！

gz-vps · 发表于 2011-8-27 10:51

楼主，您这截图...
太幽默了。注册2年第一次回帖。

秋秋 · 发表于 2011-8-27 10:52

(*^__^*) 嘻嘻……

fl · 发表于 2011-8-27 10:52

楼主v5,我经常用$.blockUI()解决这个问题!!

帐号		自动登录	找回密码
密码			成为会员