当前位置:Gxlcms > JavaScript > 什么是js特效遮罩层

什么是js特效遮罩层

时间:2021-07-01 10:21:17 帮助过:25人阅读

  1. <!DOCTYPE html><html>
  2. <head><meta charset="UTF-8"><title></title><style>* {
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6. .mask {
  7. width: 100%;
  8. /*height: 500px;*/
  9. position: fixed;
  10. top: 0px;
  11. left: 0px;
  12. background-color: black;
  13. opacity: 0.5;
  14. }
  15. .show {
  16. width: 500px;
  17. height: 300px;
  18. position: fixed;
  19. top: 100px;
  20. left: 300px;
  21. background-color: white;
  22. z-index: 999;
  23. }
  24. </style></head>
  25. <body><!--遮罩层--><p class="mask" hidden="hidden"></p><!--弹出层--><p class="show" hidden="hidden"></p><input type="button" value="点 出 来" onclick="show_plus()" /></body>
  26. </html>
  27. <script>var mask = document.getElementsByClassName('mask')[0];
  28. var show = document.getElementsByClassName("show")[0];
  29. var c_height = document.documentElement.clientHeight;
  30. var c_width = document.documentElement.clientWidth;
  31. mask.style.height = c_height + "px";
  32. show.style.left = c_width / 2 - 250 + "px";
  33. show.style.top = c_height / 2 - 150 + "px";
  34. function show_plus() {
  35. mask.removeAttribute("hidden");
  36. show.removeAttribute("hidden");
  37. }
  38. mask.onclick = function() {
  39. mask.setAttribute("hidden", "hidden");
  40. show.setAttribute("hidden", "hidden");
  41. }
  42. window.onresize = function() {
  43. var c_height = document.documentElement.clientHeight;
  44. var c_width = document.documentElement.clientWidth;
  45. mask.style.height = c_height + "px";
  46. show.style.left = c_width / 2 - 250 + "px";
  47. show.style.top = c_height / 2 - 150 + "px";
  48. }
  49. </script>

以上就是什么是js特效遮罩层的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行