ホームページ > 記事 > ウェブフロントエンド > jQuery はページ マスク レイヤー効果を作成します
jQuery はページ マスク レイヤー効果を作成します
- php中世界最好的语言オリジナル
- 2018-04-19 15:19:212288ブラウズ
今回は、jQuery を使用してページ マスク レイヤー エフェクトを作成する方法を説明します。jQuery でページ マスク レイヤー エフェクトを作成する際の 注意事項 は何ですか?実際の事例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="aportpower"/>
<title>遮罩层</title>
<style type="text/css">
.fh-link-bar {
border-top: none;
}
.fh-link-bar {
background-color: #fff;
border: 1px solid #eaeaea;
border-left: none;
border-right: none;
padding: 10px;
height: 50px;
line-height: 30px;
font-size: 14px;
}
#personsex{
float: right;
}
.personsex {
background: magenta;
width: 150px;
height: 180px;
line-height: 40px;
text-align: center;
border-radius: 2px;
z-index: 104; /*层级关系为104*/
/*只是用来控制位置的*/
position: absolute;
margin: 100px auto;
font-size: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/*一定要记得添加样式（必须）*/
.loading-shade {
position: fixed; /*窗口定位*/
background: rgba(0,0,0,.5); /*遮罩层的颜色*/
z-index: 102; /*层级关系为102*/
}
.loading-shade{
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!--页面上原先有的内容（用来执行点击）-->
<section class="fh-link-bar" id="sexlog">
<span>性别</span>
<span class="fh-data" id="personsex">男</span>
</section>
<!--页面上原先没有的内容（用来执行点击后生成的提示框）-->
<p class="personsex" style="display: none;">
<p>保密</p>
<p>男</p>
<p>女</p>
</p>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//添加页面遮罩
function addShade() {
var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
$("body").append('<p class="loading-shade"></p>');
//$(".loading-shade").css("height",htmlHeight+"px");
$(".loading-shade").css("100%");
}/*删除页面遮罩*/
function removeShade() {
$(".loading-shade").remove();
}
/*页面遮罩点击关闭弹出层
* dom=>#id
* type => hide || remove
* */
function closep(dom, type) {
$(".loading-shade").click(function() {
type == "hide" ? $(dom).hide() : $(dom).remove();
$(".loading-shade").remove();
})
}
//需要调用的页面添加的js（这里是点击上边的p(即：.personsex p元素)的时候实现遮罩层消失。）
// $('#sexlog,#personsex').unbind("click").bind("click",function(){
// addShade();
// $('.personsex').show();
// });
//
// $('.personsex p').bind('click',function(){
// $('.loading-shade').remove();
// $('.personsex').hide();
// });
//======================================================================================
//需要调用的页面添加的js（这里是点击遮罩层实现遮罩层（即：.loading-shade）页面关闭）
$('#sexlog,#personsex').unbind("click").bind("click",function(){
addShade();
$('.personsex').show();
del();
});
function del(){
$('.loading-shade').bind('click',function(){
$('.loading-shade').remove();
$('.personsex').hide();
});
}
</script>
</html>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がjQuery はページ マスク レイヤー効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。