当前位置:  编程技术>jquery

JS遮罩层效果(兼容ie firefox) jQuery遮罩层实例

    来源: 互联网  发布时间:2014-10-04

    本文导语:  例子,强大的JS遮罩层效果,支持ie firefox jQuery遮罩层   代码示例: JS遮罩层效果,支持ie firefox jQuery遮罩层 - www. //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$("body").height(); var bW=$("body").width()+16; var objWH...

例子,强大的JS遮罩层效果,支持ie firefox jQuery遮罩层
 

代码示例:





JS遮罩层效果,支持ie firefox jQuery遮罩层 - www.


//显示灰色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("

正在加载,请稍后...
");
$(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");
}



*{
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;
}












    
 
 

您可能感兴趣的文章:

  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • jquery返回顶部效果(兼容IE6)的实现代码
  • jquery div拖拽效果(兼容浏览器)
  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
  • 使用C#实现在屏幕上画图效果的代码实例
  • Andorid TextView字幕效果实例
  • ******"Servlet根据JSP视图的需求生成JavaBeans的实例并输出给JSP环境"如何实现上面这句话的效果??*******
  • Jquery 键盘按键监听与滑动效果的实例
  • jQuery动画效果animate和scrollTop结合使用实例
  • jquery导航固定效果实例
  • WinForm实现同时让两个窗体有激活效果的特效实例
  • jQuery实现动画效果的简单实例
  • jQuery的效果集工具包 Glimmer iis7站长之家
  • jquery实现弹出层遮罩效果的简单实例
  • jquery实现的一个简单进度条效果实例
  • C#实现绘制浮雕图片效果实例
  • jquery文字向上跑动类似跑马灯效果实例
  • jquery文字闪动效果实例
  • Jquery 鼠标进入、离开等效果的代码实例
  • jQuery toggleClass应用实例(附效果图)
  • Android中的Button自定义点击效果实例代码
  • android Gallery组件实现的iPhone图片滑动效果实例
  • jquery实现点击弹出层效果的简单实例
  • javafx实现图片3D翻转效果方法实例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 关于Firefox中的Flash不可以显示透明效果的问题
  • iphone cocos2d 精灵的动画效果(图片,纹理,帧)CCAnimation实现
  • 3个效果超酷的FORM表单美化效果 打包下载
  • (初学): 怎样改善linux rh9的中文显示效果,能使它像windows效果一样?(在线等,急!!!!)
  • 我安装了个linux系统, 发现linux系统的显示器的显示有点小,于是我就在显示器上把大小调了一下,本想着这样会影响xp系统的显示效果,实际上没有应响xp的显示效果,这是为什么?
  • jQuery的效果集工具包 Glimmer
  • 书本翻页效果 Turn.js
  • jQuery照明效果插件 jQuery Photon
  • JavaScript 拖拉效果 Dragdealer JS
  • 图片放大效果 ImageZoom
  • jQuery电梯式滚动效果插件 Ascensor
  • Metro 风格界面效果 Droptiles
  • 关于fedora10下3D效果无法启动的问题
  • jQuery Lightbox效果插件 Boxer
  • WebGL图像效果库 Glfx.js
  • 链接渐变效果 jQuery glow
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery图片缩放效果 FancyZoom
  • jQuery滚动效果插件 jQuery.SerialScroll
  • 丰富的内容展示效果库 Impress.js
  • 仿Path按钮动画效果 PathButton
  • jQuery图片幻灯手风琴效果插件 Slidorion


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3