JS 遮照层实现代码

1.先上效果图:

2.使用方法:
初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80});
显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
关闭:Overlayer.Close();
3.代码如下:
公用函数:


代码如下:

function GetDocumentObject()
{
var obj;
if(document.compatMode=='BackCompat')
{
obj=document.body;
}
else
{
obj=document.documentElement
}
return obj;
}
function GetPageSize()
{
var obj = GetDocumentObject();
//alert('pagesize:'+obj);
with(obj)
{
return {width:((scrollWidth>clientWidth)?scrollWidth:clientWidth),height:( (scrollHeight>clientHeight)?scrollHeight:clientHeight)}
}
}
var Extend = function(destination, source)
{
for (var property in source)
{
destination[property] = source[property];
}
};
var BindAsEventListener = function(object, fun)
{
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event)
{
return fun.apply(object, [event || window.event].concat(args));
}
}

遮照层代码:


代码如下:

/*
遮照层
*/
var Overlayer=
{
//遮照层ID,这个是硬编码的
ID:'__DSKJOVERLAYER_BY_KEVIN',
//Z轴顺序
ZIndex:0,
//背景颜色
Background:'#333',
//透明度
Opacity:60,
//
Obj:''
};
/*
初始化
*/
Overlayer.Initialize=function(o)
{
//创建Html元素
this.Create();
//扩展属性赋值
Extend(this,o);
//设置样式
this.SetStyleCss();
//附加事件
AddListener(window,'resize',BindAsEventListener(this,this.Resize));
AddListener(window,'scroll',BindAsEventListener(this,function()
{
this._PageSize=GetPageSize();
if(this._PageSize.height!=this._height)
{
this.Resize();
this._height=this._PageSize.height;
}
}));
return this;
}
/*
创建HTML元素
*/
Overlayer.Create=function()
{
//alert('create');
var obj=$(this.ID);
if(!obj)
{
obj = document.createElement('div');
obj.id=this.ID;
obj.style.display='none';
document.body.appendChild(obj);
}
this.Obj=obj;
}
/*
设置样式
*/
Overlayer.SetStyleCss=function()
{
with(this.Obj.style)
{
position = 'absolute';
background = this.Background;
left = '0px';
top = '0px';
this.Resize();
zIndex = this.ZIndex;
filter = 'Alpha(Opacity='+this.Opacity+')';//IE逆境
opacity = this.Opacity/100;//非IE
}
}
/*
窗口改变大小时重新设置宽度和高度
*/
Overlayer.Resize=function()
{
if(this.Obj)
{
var size=GetPageSize();
this.Obj.style.width=size.width+'px';
this.Obj.style.height=size.height+'px';
}
}
/*
显示层
*/
Overlayer.Show=function()
{
//alert('show'+Overlayer.ID);
if(this.Obj)
{
this.Obj.style.display='block';
this.Resize();
}
}
/*
关闭层,采用隐藏层的方法实现
*/
Overlayer.Close=function()
{
var overlay=this.Obj;
if(overlay)
{
overlay.style.display='none';
}
}

4.结束语
欢迎拍砖,谢谢。

(0)

相关推荐

  • JS 遮照层实现代码

    1.先上效果图:2.使用方法: 初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}); 显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show(); 关闭:Overlayer.Close(); 3.代码如下: 公用函数: 复制代码 代码如下: function GetDocumentObject() {

  • JS实现网页上随滚动条滚动的层效果代码

    本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • javascript面向对象的方式实现的弹出层效果代码

    说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性.我现在要做的就是尽可能的让代码达到公用,像继承啦之类的.好了,这些就不多说了,对prototype不了解的可以搜索下相关内容. 今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert或confirm,第二点就是弹出的内

  • 使用cropper.js裁剪头像的实例代码

    最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下..用起来挺简单的,下面是我做的一个小例子: 开始先放个成品图: 下面给出前后端的代码 前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好. 关于jsp页面引用的两个关于cropper的 文件,我就不提供了.大家需要的可以去官方的github上去下载. 地址:https://github.com/fengyuanchen/cropper <%@ page language="ja

  • jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • js实现div层缓慢收缩与展开的方法

    本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu

  • JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下

  • 动态加载js、css的实例代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

随机推荐