<html> <head> <style> body{ font-size:12px; } </style> <script src="https://www.jb51.net/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> (function(){ $.extend($.fn,{ mask: function(msg,maskDivClass){ this.unmask(); // 参数 var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original=$(document.body); var position={top:0,left:0}; if(this[0] && this[0]!==window.document){ original=this; position=original.position(); } // 创建一个 Mask 层，追加到对象中 var maskDiv=$('<div> </div>'); maskDiv.appendTo(original); var maskWidth=original.outerWidth(); if(!maskWidth){ maskWidth=original.width(); } var maskHeight=original.outerHeight(); if(!maskHeight){ maskHeight=original.height(); } maskDiv.css({ position: 'absolute', top: position.top, left: position.left, 'z-index': op.z, width: maskWidth, height:maskHeight, 'background-color': op.bgcolor, opacity: 0 }); if(maskDivClass){ maskDiv.addClass(maskDivClass); } if(msg){ var msgDiv=$('<div><div>'+msg+'</div></div>'); msgDiv.appendTo(maskDiv); var widthspace=(maskDiv.width()-msgDiv.width()); var heightspace=(maskDiv.height()-msgDiv.height()); msgDiv.css({ cursor:'wait', top:(heightspace/2-2), left:(widthspace/2-2) }); } maskDiv.fadeIn('fast', function(){ // 淡入淡出效果 $(this).fadeTo('slow', op.opacity); }) return maskDiv; }, unmask: function(){ var original=$(document.body); if(this[0] && this[0]!==window.document){ original=$(this[0]); } original.find("> div.maskdivgen").fadeOut('slow',0,function(){ $(this).remove(); }); } }); })(); </script> </head> <body> 测试 <div> </div> <a href="#">div遮罩</a> <a href="#">关闭div遮罩</a> <a href="#">全部遮罩</a> </body> </html>
以上就是jquery实现遮罩层的全部内容介绍，希望对大家的学习有所帮助。
您可能感兴趣的文章: