이 글은 IE6과 호환되는 마스크 기능을 구현하기 위해 jQuery를 주로 소개하고, jQuery 마스크 레이어의 레이아웃, 스타일, 기능 구현 기술을 자세히 분석하여 필요한 친구들이 참고하면 도움이 될 것입니다.
가장 간편하고 강력한 jQuery 마스크 레이어 효과.
브라우저의 크기가 변경되면 마스크 레이어의 크기도 그에 따라 변경됩니다.
마스크 레이어 위의 대화 상자는 스크롤 변경에 따라 변경될 수 있습니다. 즉, 대화 상자가 브라우저 중앙에 표시됩니다.
HTML code
<p id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >点击这里看 jQuery 遮罩层效果.</a></p> <p id="fullbg"></p> <p id="dialog"> <p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >关闭</a></p> 正在加载,请稍后... </p>
CSS code
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; } #main { height: 1800px; padding-top: 90px; text-align: center; } #fullbg { background-color: Gray; left: 0px; opacity: 0.5; position: absolute; top: 0px; z-index: 3; filter: alpha(opacity=50); /* IE6 */ -moz-opacity: 0.5; /* Mozilla */ -khtml-opacity: 0.5; /* Safari */ } #dialog { background-color: #FFF; border: 1px solid #888; display: none; height: 200px; left: 50%; margin: -100px 0 0 -100px; padding: 12px; position: fixed !important; /* 浮动对话框 */ position: absolute; top: 50%; width: 200px; z-index: 5; } #dialog p { margin: 0 0 12px; } #dialog p.close { text-align: right; }
jquery code
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> //显示灰色 jQuery 遮罩层 function showBg() { var bh = $("body").height(); var bw = $("body").width(); $("#fullbg").css({ height:bh, width:bw, display:"block" }); $("#dialog").show(); } //关闭灰色 jQuery 遮罩 function closeBg() { $("#fullbg,#dialog").hide(); } </script> <!--[if lte IE 6]> <script type="text/javascript"> // 浮动对话框 $(document).ready(function() { var domThis = $('#dialog')[0]; var wh = $(window).height() / 2; $("body").css({ "background-image": "url(about:blank)", "background-attachment": "fixed" }); domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"'); }); </script> <![endif]-->
여기에서 jquery 파일을 가져오는 것을 잊지 마세요 .
관련 권장 사항:
그림 위에 마우스를 놓았을 때 마스크 효과를 구현하는 JS 코드 예제
마스크 레이어 이후 페이지 스크롤을 방지하는 방법 예제
위 내용은 IE6과 호환되는 마스킹 기능의 jQuery 구현 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!