js抄袭笔记 -- 完美黑屏

[size=large]
好处:
1.考虑了resize
2.考虑了页面宽度不足一屏幕
3.考虑了滚动条

http://james.padolsey.com/page/2/

function documentOverlay() {
// @version 0.12
// @author James Padolsey
// @info http://james.padolsey.com/javascript/the-perfect-document-overlay/

// Shortcut to current instance of object:
var instance = this,

// Cached body height:
bodyHeight = (function(){
return getDocDim('Height','min');
})();

// CSS helper function:
function css(el,o) {
for (var i in o) { el.style[i] = o[i]; }
return el;
};

// Document height/width getter:
function getDocDim(prop,m){
m = m || 'max';
return Math[m](
Math[m](document.body["scroll" + prop], document.documentElement["scroll" + prop]),
Math[m](document.body["offset" + prop], document.documentElement["offset" + prop]),
Math[m](document.body["client" + prop], document.documentElement["client" + prop])
);
}

// get window height: (viewport):
function getWinHeight() {
return window.innerHeight ||
(document.compatMode == "CSS1Compat" && document.documentElement.clientHeight || document.body.clientHeight);
}

// Public properties:

// Expose CSS helper, for public usage:
this.css = function(o){
css(instance.element, o);
return instance;
};

// The default duration is infinity:
this.duration = null;

// Creates and styles new div element:
this.element = (function(){
return css(document.createElement('div'),{
width: '100%',
height: getDocDim('Height') + 'px',
position: 'absolute', zIndex: 999,
left: 0, top: 0,
});
})();

// Resize cover when window is resized:
window.onresize = function(){

// No need to do anything if document['body'] is taller than viewport
if(bodyHeight>getWinHeight()) { return; }

// We need to hide it before showing
// it again, due to scrollbar issue.
instance.css({display: 'none'});
setTimeout(function(){
instance.css({
height: getDocDim('Height') + 'px',
display: 'block'
});
}, 10);

};

// Remove the element:
this.remove = function(){
this.element.parentNode && this.element.parentNode.removeChild(instance.element);
};

// Show element:
this.show = function(){};

// Event handling helper:
this.on = function(what,handler){
what.toLowerCase() === 'show' ? (instance.show = handler)
: instance.element['on'+what] = handler;
return instance;
};

// Begin:
this.init = function(duration){

// Overwrite duration if parameter is supplied:
instance.duration = duration || instance.duration;

// Inject overlay element into DOM:
document.getElementsByTagName('body')[0].appendChild(instance.element);

// Run show() (by default, an empty function):
instance.show.call(instance.element,instance);

// If a duration is supplied then remove element after
// the specified amount of time:
instance.duration && setTimeout(function(){instance.remove();}, instance.duration);

// Return instance, for reference:
return instance;

};

}
var Mao = (new documentOverlay()).css({
background: 'black',
opacity: 0.5,
filter: 'alpha(opacity=50)'
}).on('dblclick',function(){
Mao.remove()
}).init();

[/size]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值