码磊姐姐
雄关漫道真如铁,而今迈步从头越。

 

在解决页面加载的问题时出现这种效果:

 

 

 在我缩小又放大浏览器窗口的时候,这个遮罩层并没有跟着我的窗口的改变而改变,这个时候,就需要我解决两个问题,一个是遮罩层的宽高 ,另一个就是中间那个加载的动图的位置

,遮罩层我把它的高度和宽度都设为100%就可以,我只粘了部分样式代码,具体实现代码还需要根据不同的项目来决定。这样不管我是否改变窗口,它都可以覆盖整个页面

var maskHeight = $(document).height();
var maskWidth = $(window).width();
var bgDiv = $('<div id="' + options.background.id + '"/>');
bgDiv.css({
zIndex: options.zIndex,
position: 'absolute',
top: '0px',
left: '0px',
"height": "100%",
"width": "100%",
opacity: options.background.opacity
});

bgDiv.appendTo("body");

接着就是加载中动图的位置,需要加个jquery的$(window).resize()监听事件,

$(window).on('resize',function () {
console.log("窗口改变了");
div.center();
});

监听事件调用的是center()函数:

$.fn.center = function () {
this.css("position", "absolute");
this.css("top",($(window).height() - this.outerHeight()) / 2 + $(window).scrollTop() + "px");
this.css("left",($(window).width() - this.outerWidth()) / 2 + $(window).scrollLeft() + "px");
return this;
};
})

这样,这个问题看起来解决了,但是还有个问题就是,$(window).resize()这个事件会调用多次,所以完美的做法就是先把上次的操作关闭:$(window).off('resize',div.center());

还有一个闭包的问题,就是div.center()这个调用外部函数的方法最好被替换掉,div具体的id调用,比如div的id为loders,那么调用的方法就是$("#loders").center();尽量避免直接访问外部的变量。

 

posted on 2021-06-30 14:18  码磊姐姐  阅读(52)  评论(0编辑  收藏  举报