cari

Rumah >hujung hadapan web >tutorial js >什么是js特效遮罩层

什么是js特效遮罩层

一个新手
一个新手asal
2017-09-29 09:40:332523semak imbas

<!DOCTYPE html><html>
<head><meta charset="UTF-8"><title></title><style>* {
    margin: 0px;
    padding: 0px;
}
.mask {
    width: 100%;
    /*height: 500px;*/
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0.5;
}
.show {
    width: 500px;
    height: 300px;
    position: fixed;
    top: 100px;
    left: 300px;
    background-color: white;
    z-index: 999;
}
</style></head>
<body><!--遮罩层--><p class="mask" hidden="hidden"></p><!--弹出层--><p class="show" hidden="hidden"></p><input type="button" value="点 出 来" onclick="show_plus()" /></body>
</html>
<script>var mask = document.getElementsByClassName(&#39;mask&#39;)[0];
    var show = document.getElementsByClassName("show")[0];
    var c_height = document.documentElement.clientHeight;
    var c_width = document.documentElement.clientWidth;
    mask.style.height = c_height + "px";
    show.style.left = c_width / 2 - 250 + "px";
    show.style.top = c_height / 2 - 150 + "px";
    function show_plus() {
    mask.removeAttribute("hidden");
    show.removeAttribute("hidden");
}
mask.onclick = function() {
    mask.setAttribute("hidden", "hidden");
    show.setAttribute("hidden", "hidden");
}
window.onresize = function() {
    var c_height = document.documentElement.clientHeight;
    var c_width = document.documentElement.clientWidth;
    mask.style.height = c_height + "px";
    show.style.left = c_width / 2 - 250 + "px";
    show.style.top = c_height / 2 - 150 + "px";
}
</script>

Atas ialah kandungan terperinci 什么是js特效遮罩层. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：angular监听移动端键盘的弹起和收回的方法Artikel seterusnya：一个非常好用的前端分页js工具类

Artikel berkaitan

Lihat lagi