xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > 纯js实现遮罩层效果原理分析

纯js实现遮罩层效果原理分析

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-02 13:41

能够说这么些效应,在自个儿晓得了前边的“贪吃蛇”之后,实在是与刚起始想象的难度差了累累,当然是这种办法有取巧之嫌,究竟是达成了意义,大家来开展深入分析整理

1、完成原理

本片小说的 是落到实处原理如下:

* 实际上弹出层、遮罩层和原页面展现分别为多少个差别的div

* 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上;

* 遮罩层有辉煌效果

* 遮罩层未有实际意义,则没有供给在html部分就写上,当然写上同一能够兑现

2、代码达成

html语言如下:

复制代码 代码如下:

<html>

....

<body>

<center>

<div ><input type="button" value="go" onclick="show()"></div>

<div id="alert" style="display:none;">

<form>

登录

<input type="text"><input type="password"><input type="submit" value="login">

</form>

</div>

</center>

</body>

</html>

javascript落到实处弹出层和遮罩层:

复制代码 代码如下:

<span style="font-size:12px;">function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";

var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);

document.body.style.overflow = "hidden";
}
</script></span>

那边用z-index来区分层级,opacity和filter:阿尔法(opacity=)发光度,document.createElement("div")和document.body.appendChild()这几个都是在头里出现过,应用过的了,那样大家就能够完结了,其实当公理明白了的那一刻,一切也就轻便多了吧。

王鲁国远而修远兮啊

...

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:纯js实现遮罩层效果原理分析

关键词: