`
ziyuewang
  • 浏览: 40291 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

JQuery遮罩层

阅读更多

以下是截图 :

 

 

 

代码 :

 

<!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>
 
分享到:
评论
18 楼 liuyes 2011-04-24  
截图很强大
17 楼 ziyuewang 2011-04-23  
哈哈哈哈哈哈哈哈!见笑啊!
16 楼 kongzhizhen 2011-04-23  
我对这截图表示很不淡定....年度幽默奖吧....JEER颁发的。..
15 楼 caiceclb 2011-04-22  
轻量级jquery遮罩插件:http://demo.cssor.com/jcover/
14 楼 lib 2011-04-22  
<div class="quote_title">qwert100 写道</div>
<div class="quote_div">
<br>为什么我发的代码前面没有1、2、3、....<br>各位朋友,你么发时,文字跟代码是单独发的吗?<br><br>
</div>
<p>点击“代码”,出现一个对话框,将代码复制到对话框中即可出现“1、2、3”。如图:</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/468567/5dad486b-debd-370d-80fa-1defbf70017a.bmp" alt=""></p>
<p><br><img src="http://dl.iteye.com/upload/attachment/468569/c5d21936-1928-3734-a086-151647906392.bmp" alt=""></p>
 
13 楼 qwert100 2011-04-22  

为什么我发的代码前面没有1、2、3、....
各位朋友,你么发时,文字跟代码是单独发的吗?

qwert100 写道
也可参考下这个:

<!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=gbk" />
<title>史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="C:\Documents and Settings\Administrator\桌面\test\jQuery\jquery-1.5.2.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}

//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}

</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}

#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}

#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>
</div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>



12 楼 ziyuewang 2011-04-22  
谢谢大家的建议!
11 楼 qwert100 2011-04-22  
也可参考下这个:

<!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=gbk" />
<title>史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="C:\Documents and Settings\Administrator\桌面\test\jQuery\jquery-1.5.2.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}

//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}

</script>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}

#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}

#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>
</div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>


10 楼 ziyuewang 2011-04-21  
呵呵,是啊,我就是随意写写!
9 楼 kjj 2011-04-21  
楼主v5,我经常用$.blockUI()解决这个问题!!
8 楼 ziyuewang 2011-04-21  
(*^__^*) 嘻嘻……
7 楼 dongjun316 2011-04-21  
楼主,您这截图...
太幽默了。注册2年第一次回帖。
6 楼 ziyuewang 2011-04-21  
int08h 写道
document.documentElement.clientWidth改成$(window).width()吧,jQuery还是有其他的考虑的
这截图太生猛了……


呵呵见笑了!
5 楼 int08h 2011-04-21  
document.documentElement.clientWidth改成$(window).width()吧,jQuery还是有其他的考虑的
这截图太生猛了……
4 楼 shihao 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();
	})
}
3 楼 ziyuewang 2011-04-18  
谢谢你的建议
2 楼 BoneWG 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分体广告插件详细介绍
1 楼 BoneWG 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()})
})

相关推荐

    jquery遮罩层

    首先,要实现一个基本的jQuery遮罩层,我们需要引入jQuery库。如果你的项目中还没有包含jQuery,可以在HTML文件头部添加以下链接来引入官方CDN上的最新版本: ```html &lt;script src="https://code.jquery....

    jquery 遮罩层

    本示例中的“jquery 遮罩层”是指利用jQuery来实现一种交互效果:当鼠标悬停在图片上时,图片的右下角会出现一个白色的三角形遮罩层,同时显示图片的标题内容。这个效果通常用于提高用户体验,让用户能够快速了解...

    jQuery遮罩层在线QQ客服代码

    首先,我们来了解jQuery遮罩层的基本概念。遮罩层是一种常见的网页设计元素,通常用于创建半透明的覆盖层,用于突出显示特定内容或加载弹出窗口。通过使用jQuery,我们可以轻松地动态添加、修改和删除DOM元素,实现...

    jquery 遮罩层 插件

    非常好用的一款jquery遮罩层插件,网页制作必备。

    jQuery遮罩层在线QQ客服代码.zip

    《jQuery遮罩层在线QQ客服代码详解》 在网页设计中,交互性和用户体验是至关重要的因素,而在线客服系统则是提升用户体验的有效手段之一。本文将深入解析“jQuery遮罩层在线QQ客服代码”,帮助开发者理解并掌握这一...

    JQUERY遮罩层效果

    通过这种方式,我们可以轻松地在网页中实现jQuery遮罩层效果,提供更好的用户体验,而无需刷新整个页面。这仅仅是jQuery实现遮罩层的基本用法,实际开发中可以根据需求进行定制和扩展,如添加动画效果、自适应布局...

    JQuery遮罩层登录界面源码

    JQuery遮罩层登录界面源码 测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边) 点击登录显示登录...

    Jquery遮罩层组件

    **jQuery 遮罩层组件详解** 在网页开发中,遮罩层(Mask Layer)是一种常见且实用的设计元素,用于创建弹出式窗口、加载指示器或者提示信息,以达到吸引用户注意力或阻断背景交互的效果。jQuery 道具库提供了一款名...

    简单容易的jquery遮罩层

    jQuery遮罩层(jQuery Mask)是jQuery的一个常见应用,用于创建覆盖整个网页或部分区域的透明层,通常用于加载提示、弹窗提示、用户交互等场景。下面我们将深入探讨jQuery遮罩层的实现原理、使用方法及其相关的知识...

    JQUERY 遮罩层

    在本话题中,我们将探讨“JQUERY 遮罩层”的概念,这是一种创建弹出对话框或加载指示器的常用技术。遮罩层通常用于在页面上覆盖一层半透明的背景,使用户专注于特定区域,如表单提交、警告信息或内容加载。 首先,...

    jquery遮罩层插件mloading

    **jQuery 遮罩层插件 mloading** 在网页开发中,为了提供更好的用户体验,我们经常需要在数据加载或处理过程中显示一个遮罩层,让用户知道后台正在执行操作。jQuery 插件 `mloading` 正是为此目的设计的。这个插件...

    非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框

    在本示例中,“非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框”是一个利用jQuery实现的功能,主要用于增强用户交互体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先,jQuery遮罩层(Mask Layer...

    JQuery遮罩层登录界面 2.0.rar

    一、源码描述 这是JQuery遮罩层登录界面源码的更新版本,这次主要添加了数据库,方便大家使用,可以用作学习交流,感兴趣的可以下载研究写一下。二、功能介绍 点击登录显示登录窗口(层) ,同时用一个灰色透明层...

    JQuery 遮罩层

    首先,我们来看`fakeLoader.js-master`这个文件名,这很可能是一个关于jQuery遮罩层的开源项目。`fakeLoader.js`是核心JavaScript文件,`master`则可能表示这是项目的主要分支或者最新版本。通常,这个压缩包会包含...

    jQuery 遮罩层

    **jQuery 遮罩层详解** 在Web开发中,遮罩层(Mask Layer)是一种常见的交互元素,用于在用户与页面交互时提供一种半透明覆盖,通常用于加载提示、弹窗确认、模态对话框等场景。jQuery,作为一款广泛使用的...

    jQuery遮罩层代码,点击链接弹出浮动层效果.rar

    jQuery遮罩层代码,点击链接弹出浮动层效果,实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口,有了实例,大家用起来就得心应手了,代码中的jQuery,引自google官方的托管库代码。

    jQuery遮罩层登录界面效果,AJAX登录验证,附源码下载.rar

    本项目“jQuery遮罩层登录界面效果,AJAX登录验证”是基于jQuery实现的一个登录功能,其核心特点在于创建了一个遮罩层效果以及利用AJAX进行后台验证,提供用户友好的交互体验。 首先,遮罩层是一种常见的网页设计...

Global site tag (gtag.js) - Google Analytics