var originalLeft=originalTop='';
$('.sec_item img').click(function(){
var globalBackground = document.getElementById('globalBackground'); //遮罩层Id
if(globalBackground.style.opacity!=0.5){
lobalBackground.style.width=window.screen.width+'px';
globalBackground.style.opacity='0.5';
originalLeft = $(this).position().left;
originalTop = $(this).position().top;
$(this).css('z-index','1000');
$(this).css('position','absolute');
//可以通过改变width实现图片放大
//$(this).css('width', 图片新宽度);
//$(this).css('left', window.screen.width/2 - 图片宽度/2);
//$(this).css('top', window.screen.height/2 - 图片高度/2);
}else{
globalBackground.style.width='0px';
globalBackground.style.opacity='1';
$(this).removeAttr('style');
//可以通过改变width实现图片还原
//$(this).css('width', 图片旧宽度);
//$(this).css('left', originalLeft);
//$(this).css('top', originalTop);
}
})
前端遮罩层的用法(点击图片触发)
最新推荐文章于 2024-02-18 02:37:57 发布