JavaScript 動畫方式彈出圓角框

admin發表於2018-11-27
JavaScript動畫

分享一段程式碼例項，它實現了彈出小視窗效果。

這樣的效果比較常見於對於某一個操作的提示，此效果的展現具有動畫效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div, ul, li, body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}
#prompt {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 999999;
  width: 300px;
  height: 100px;
  margin: -50px 0 0 -150px;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  line-height: 100px;
  color: #fff;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
#prompt.show {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
#prompt span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #000;
  opacity: .5;
  filter: alpha(opacity = 50);
  border-radius: 10px;
}
</style>
<script>
window.onload = function() {
  promptFn({
    btn: 'button',
    txt: 'txt'
  });
 
  function promptFn(arge) {
    var btn = document.getElementById(arge.btn); //獲取按鈕
    btn.onclick = function() {
      createNode(arge);
    }
 
    function createNode(arge) {
      var btn = document.getElementById(arge.btn),
          status = btn.getAttribute('status');
      if (status) {
        return false;
      }
 
      btn.setAttribute('status', 'true');
 
      var div = document.createElement('div'),
          span = document.createElement('span'),
          txt = document.getElementById(arge.txt).value;
      div.id = 'prompt';
      div.innerHTML = txt;
      div.appendChild(span);
      document.body.appendChild(div);
      animation(div, btn);
    }
 
    function animation(obj, btn) {
      var timerShow = null,
          timerHide = null,
          timerRemove = null;
 
      timerShow = setTimeout(function() {
        obj.className = 'show';
        timerHide = setTimeout(function() {
          obj.className = '';
          timerRemove = setTimeout(function() {
            obj.remove();
            btn.setAttribute('status', '');
          }, 400);
        }, 2000);
      }, 100);
    }
  }
};
</script>
</head>
<body>
  顯示內容：<input type="text" value="螞蟻部落歡迎您" id="txt">
  <input type="button" value="檢視效果" id="button">
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function() {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.promptFn({

  btn: 'button',

  txt: 'txt'

})，promptFn()函式可以實現我們要求的效果，引數是一個配置物件。

btn屬性值是按鈕的id屬性值；txt屬性值是文字框的id屬性值。

（3）.function promptFn(arge) ，上面已經有簡單介紹。

（4）.var btn = document.getElementById(arge.btn)，獲取對應的元素物件。

（5）.btn.onclick = function() {

  createNode(arge);

}，為按鈕註冊click事件處理函式，關於createNode()方法的用法後面會介紹。

（6）. function createNode(arge) {}，引數是一個配置物件。

（7）.var btn = document.getElementById(arge.btn)，獲取按鈕元素物件。

（8）.status = btn.getAttribute('status')，獲取按鈕的status屬性值，這個屬性用來標識按鈕是否已經點選，並且彈出層沒有消失。

（9）.if (status) {

  return false;

}，如果為true，那麼就直接返回，防止多次重複點選彈出多個層的現象。

（10）. btn.setAttribute('status', 'true')，設定屬性值為true。

（11）.var div = document.createElement('div')，建立一個div元素。

（12）.span = document.createElement('span')，建立一個span元素。

（13）.txt = document.getElementById(arge.txt).value，獲取文字框的value值。

（14）.div.id = 'prompt'，設定div的id屬性值為'prompt'。

（15）.div.innerHTML = txt，設定div的html內容。

（16）.div.appendChild(span)，將span元素新增div中，這個就是那個半透明遮罩。

（17）.animation(div, btn)，此方法的具體用法下面會介紹。

（18）.function animation(obj, btn) {}，實現動畫方式顯示彈出層，obj是div元素物件，btn是按鈕物件。

（19）.var timerShow = null,timerHide = null,timerRemove = null，宣告三個變數並賦值為null，用作定時器函式的標識。

（20）.timerShow = setTimeout(function() {},100)，100毫秒後顯示彈出層。

（21）.obj.className = 'show'，設定div元素的class屬性值為"show",這樣彈出層就會顯示。

（22）.timerHide = setTimeout(function() {},2000)，2000毫秒後，彈出層隱藏。

（23）.obj.className = ''，清空class屬性值。

（24）.timerRemove = setTimeout(function() {

  obj.remove();

  btn.setAttribute('status', '');

}, 400)，刪除div彈出層，並移除按鈕的對應屬性。

二.相關閱讀:

（1）.border-radius可以參閱CSS3 border-radius一章節。

（2）.transition可以參閱CSS3 transition一章節。

（3）.transform可以參閱CSS3 transform一章節。

（4）.document.getElementById()可以參閱document.getElementById()一章節。

（5）.getAttribute()可以參閱getAttribute()一章節。

（6）.document.createElement()可以參閱document.createElement()一章節。

（7）.innerHTML可以參閱innerHTML一章節。

（8）.appendChild()可以參閱appendChild()一章節。

（9）.setTimeout()可以參閱setTimeout()一章節。

（10）.className可以參閱js className一章節。

相關文章