2017.3.29 今天开始写特效

第一个特效：点击弹出对话框（效果：跟随滚动条，位置固定等）

 

　　　　

  <!DOCTYPE html>
  <html>
   
  <head>
  <meta charset="utf-8" />
  <title></title>
  <style>
  *{
  margin: 0px;
  padding: 0px;
  }
  .mask{
  width: 100%;
  /*height: 500px;*/
  background-color: gray;
  opacity: 0.5;
  z-index: 998;
  position: absolute;
  top: 0px;
  left: 0px;
  }
  .login{
  width: 400px;
  height: 300px;
  background-color: royalblue;
  position: fixed;
  /*left: 200px;
  top: 300px;*/
  z-index: 999;
  }
  .close-btn{
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: aquamarine;
  text-align: center;
  line-height: 30px;
  font-size: 30px;
  }
  .close-btn:hover{
  cursor: pointer;
  }
  </style>
  </head>
   
  <body>
  <input type="button" value="登录" id="login" />
  <script>
  document.getElementById("login").onclick = function(){
  var x = "<div class='close-btn'>X</div>";
  showLogin(x);
  }
  </script>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
  <!--<div class="mask"></div>-->
  <!--<div class="login">
  <div class="close-btn">X</div>
  </div>-->
  </body>
   
  </html>
  <script>
  function showLogin(x){
  var bodyHeight = document.body.clientHeight;
  var clientHeight = document.documentElement.clientHeight;
  var clientWidth = document.documentElement.clientWidth;
   
  var mask = document.createElement("div");
  mask.className = "mask";
  mask.style.height = bodyHeight + "px";
  mask.onclick = function(){
  mask.remove();
  login.remove();
  };
  document.body.appendChild(mask);
   
  var login = document.createElement("div");
  login.className = "login";
  login.style.left = clientWidth/2 - 200 + "px";
  login.style.top = clientHeight/2 - 150 + "px";
  login.innerHTML = x;
  document.body.appendChild(login);
   
  document.getElementsByClassName("close-btn")[0].onclick = function(){
  mask.remove();
  login.remove();
  }
  }
  document.body.onresize = function(){
  var clientHeight = document.documentElement.clientHeight;
  var clientWidth = document.documentElement.clientWidth;
  var login = document.getElementsByClassName("login")[0];
  login.style.left = clientWidth/2 - 200 + "px";
  login.style.top = clientHeight/2 - 150 + "px";
  }
  </script>
posted @ 2017-03-29 16:47  雪花飘刂  阅读(90)  评论(0)    收藏  举报