利用jquery實(shí)現(xiàn)一個(gè)加載更多緩沖效果

發(fā)布時(shí)間：2020-11-10 14:51:16 來源：億速云閱讀：196 作者：Leah 欄目：開發(fā)技術(shù)

利用jquery實(shí)現(xiàn)一個(gè)加載更多緩沖效果？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

代碼：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css畫動態(tài)等待轉(zhuǎn)圈效果</title>
  <link rel="stylesheet" href="public/index.css" rel="external nofollow" >
</head>
<style type="text/css">
 .toast {
  display: none;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 18rem;
  height: 18rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #4A4A4B;
  border-radius: 1rem;
  color: #f0f0f0;
  font-size: 2.5rem;
 }
 .load {
  display: inline-block;
  margin-bottom: 1.5rem;
  height: 4rem;
  width: 4rem;
  border: 0.4rem solid transparent;
  border-top-color: white;
  border-left-color: white;
  border-bottom-color: white;
  animation: circle 1s infinite linear;
  -webkit-animation: circle 1s infinite linear; /* Safari 和 Chrome */
  border-radius: 50%
 }

 @-webkit-keyframes circle {
  0% {
   transform: rotate(0deg);
  }
  100% {
   transform: rotate(-360deg)
  }
 }
</style>

<body>

<div class="toast">
  <span class="load"></span>
  <span>加載中...</span>
</div>

<script src="public/jquery.min.js"></script>
<script>
 $(function () {
  $('.toast').css({display: 'flex'})
  //這里可以寫網(wǎng)絡(luò)請求代碼...
  $.ajax({
   url: '/api/login',
   type: 'POST',
   data: {username: '111'},
   dataType: 'json',
   success: function (data) {//請求成功則關(guān)閉圈圈
    $('.toast').css({display: 'none'})
   },
   error: function (e) {
    console.log(e)
   }
  })

 });
</script>

</body>
</html>

效果：

利用jquery實(shí)現(xiàn)一個(gè)加載更多緩沖效果

看完上述內(nèi)容，你們掌握利用jquery實(shí)現(xiàn)一個(gè)加載更多緩沖效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

利用jquery實(shí)現(xiàn)一個(gè)加載更多緩沖效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽