|
锁定老帖子 主题：JQuery遮罩层
精华帖 (0) :: 良好帖 (0) :: 新手帖 (9) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-18
以下是截图 ：
代码 ：
<!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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-04-18
$(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-04-18
BoneWG 写道
$(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-04-18
谢谢你的建议
|
| 返回顶楼 | |
|
发表时间：2011-04-21
以下这个更好
$.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-04-21
document.documentElement.clientWidth改成$(window).width()吧，jQuery还是有其他的考虑的
这截图太生猛了…… |
| 返回顶楼 | |
|
发表时间：2011-04-21
int08h 写道 document.documentElement.clientWidth改成$(window).width()吧，jQuery还是有其他的考虑的
这截图太生猛了…… 呵呵见笑了！ |
| 返回顶楼 | |
|
发表时间：2011-04-21
楼主，您这截图...
太幽默了。注册2年第一次回帖。 |
| 返回顶楼 | |
|
发表时间：2011-04-21
(*^__^*) 嘻嘻……
|
| 返回顶楼 | |
|
发表时间：2011-04-21
楼主v5,我经常用$.blockUI()解决这个问题!!
|
| 返回顶楼 | |
