ziyuewang
- 浏览: 40104 次
- 性别:
- 来自: 济南
-
最新评论
-
hepeng421：
BoneWG 写道hepeng421 写道前端其实对技术的多样 ...
前端开发工程师---技术路线图 -
xiaguangme：
gaokuitai 写道这张图貌似是不豆瓣网的张克军老先生的图 ...
前端开发工程师---技术路线图 -
gaokuitai：
这张图貌似是不豆瓣网的张克军老先生的图……看过一次，伤心一次… ...
前端开发工程师---技术路线图 -
nianshi：
简单就是美
Javascript 看看黑客怎么写的 -
廢廢廢：
zhex 写道为什么要新建一个Func， 直接像下面这样不可以 ...
JavaScript实现继承---extend函数
以下是截图 ：
代码 ：
<!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>
<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>
<!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>
<!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年第一次回帖。
太幽默了。注册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()})
})
发表评论
-
JavaScript实现的计算器（一种全新的继承方式，模拟多态，策略模式）
2011-04-22 22:42 1332截图 : cal.js ... -
JavaScript实现继承---extend函数
2011-04-19 18:05 4179/* Extend Function */ functi ... -
JavaScript---Tooltip提示（很早以前写的）
2011-04-18 16:07 1562截图 : 代码 : <!DOCTYP ... -
简洁的表单验证器---FormValidator
2011-04-15 12:53 1084说明 : 代码逐步完善，结构已定好，和大家分享，大家多多指点 ... -
短小简洁的ImageSlider
2011-04-15 01:23 1396截图 : <!DOCTYPE html PU ... -
JavaScript模拟数据库curd(包含数据导入导出，操作日志)
2011-04-13 17:22 1008说明 : 正在开发中 截图 : <script ... -
自己写的XGrid O(∩_∩)O~
2011-04-12 14:00 869<script type="text/java ... -
自己写的TagBOX---随机变换的字体颜色和大小
2011-04-11 17:25 1467<script type="text/java ... -
X-WebOS的界面雏形
2011-04-10 20:00 1201<!DOCTYPE html PUBLIC " ... -
右键小菜单练习---JavaScript
2011-04-10 16:15 906<script type="text/ja ... -
选项卡应用
2011-04-09 18:43 727<!DOCTYPE html PUBLIC &q ... -
FAQ小应用 O(∩_∩)O哈哈~
2011-04-09 14:24 910<style type="text/css ... -
自适应大小的MsgBox
2011-04-09 11:48 1188<style type="text/css ... -
短小快捷的EasyCombox (*^__^*) 嘻嘻……
2011-04-08 22:47 903<style type="text/c ... -
写一个分页插件分享给大家---PageToolkit
2011-04-08 16:17 1089you ！ -
基于JQuery写的Grid，大家多多指点
2011-04-08 11:20 3278截图 : $(function(){ var ...
相关推荐
首先，要实现一个基本的jQuery遮罩层，我们需要引入jQuery库。如果你的项目中还没有包含jQuery，可以在HTML文件头部添加以下链接来引入官方CDN上的最新版本： ```html <script src="https://code.jquery....
本示例中的“jquery 遮罩层”是指利用jQuery来实现一种交互效果：当鼠标悬停在图片上时，图片的右下角会出现一个白色的三角形遮罩层，同时显示图片的标题内容。这个效果通常用于提高用户体验，让用户能够快速了解...
首先，我们来了解jQuery遮罩层的基本概念。遮罩层是一种常见的网页设计元素，通常用于创建半透明的覆盖层，用于突出显示特定内容或加载弹出窗口。通过使用jQuery，我们可以轻松地动态添加、修改和删除DOM元素，实现...
非常好用的一款jquery遮罩层插件，网页制作必备。
《jQuery遮罩层在线QQ客服代码详解》 在网页设计中，交互性和用户体验是至关重要的因素，而在线客服系统则是提升用户体验的有效手段之一。本文将深入解析“jQuery遮罩层在线QQ客服代码”，帮助开发者理解并掌握这一...
通过这种方式，我们可以轻松地在网页中实现jQuery遮罩层效果，提供更好的用户体验，而无需刷新整个页面。这仅仅是jQuery实现遮罩层的基本用法，实际开发中可以根据需求进行定制和扩展，如添加动画效果、自适应布局...
JQuery遮罩层登录界面源码 测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两种没有出现，那个竖拉条可以在JS中通过修改数值让其不出现，但是下面会出现白边） 点击登录显示登录...
**jQuery 遮罩层组件详解** 在网页开发中，遮罩层（Mask Layer）是一种常见且实用的设计元素，用于创建弹出式窗口、加载指示器或者提示信息，以达到吸引用户注意力或阻断背景交互的效果。jQuery 道具库提供了一款名...
jQuery遮罩层（jQuery Mask）是jQuery的一个常见应用，用于创建覆盖整个网页或部分区域的透明层，通常用于加载提示、弹窗提示、用户交互等场景。下面我们将深入探讨jQuery遮罩层的实现原理、使用方法及其相关的知识...
在本话题中，我们将探讨“JQUERY 遮罩层”的概念，这是一种创建弹出对话框或加载指示器的常用技术。遮罩层通常用于在页面上覆盖一层半透明的背景，使用户专注于特定区域，如表单提交、警告信息或内容加载。 首先，...
**jQuery 遮罩层插件 mloading** 在网页开发中，为了提供更好的用户体验，我们经常需要在数据加载或处理过程中显示一个遮罩层，让用户知道后台正在执行操作。jQuery 插件 `mloading` 正是为此目的设计的。这个插件...
在本示例中，“非常简单的jquery遮罩层鼠标点击按钮放大展开动画弹出框”是一个利用jQuery实现的功能，主要用于增强用户交互体验。下面将详细介绍这个功能的实现原理和相关知识点。 首先，jQuery遮罩层（Mask Layer...
一、源码描述 这是JQuery遮罩层登录界面源码的更新版本，这次主要添加了数据库，方便大家使用，可以用作学习交流，感兴趣的可以下载研究写一下。二、功能介绍 点击登录显示登录窗口（层） ，同时用一个灰色透明层...
首先，我们来看`fakeLoader.js-master`这个文件名，这很可能是一个关于jQuery遮罩层的开源项目。`fakeLoader.js`是核心JavaScript文件，`master`则可能表示这是项目的主要分支或者最新版本。通常，这个压缩包会包含...
**jQuery 遮罩层详解** 在Web开发中，遮罩层（Mask Layer）是一种常见的交互元素，用于在用户与页面交互时提供一种半透明覆盖，通常用于加载提示、弹窗确认、模态对话框等场景。jQuery，作为一款广泛使用的...
jQuery遮罩层代码，点击链接弹出浮动层效果，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库代码。
本项目“jQuery遮罩层登录界面效果，AJAX登录验证”是基于jQuery实现的一个登录功能，其核心特点在于创建了一个遮罩层效果以及利用AJAX进行后台验证，提供用户友好的交互体验。 首先，遮罩层是一种常见的网页设计...