2016-07-15 41 views

回答

1

你可以用一個小小的jQuery代碼和一些最小的html和css來做到這一點。 jquery代碼將淡出並在5秒後移除頁面預加載器div。由於你是新的stackoverflow我會解釋什麼jquery是因爲我不知道你的熟悉程度。這是一個JavaScript庫,使javascripting快速和容易。所以你必須在jquery腳本之前在頁面上放置一個jQuery庫的鏈接。因此,將頁面加載器div放在任何想要將介紹文本放在正文標籤後面的頁面上,並將jquery鏈接和代碼添加到頁面底部。所以,你的頁面會是這個樣子:

這裏是一個小提琴向你展示它的外觀Fiddle Demo

<!DOCTYPE html> 
<head> 
<style> 
.page-loader{ 
    position:fixed; 
    top:0;left:0; 
    width:100%; 
    height:100%; 
    background:#000; 
    color:#fff; 
} 
.page-loader p{ 
    position:relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    text-align:center; 
} 
</style> 
</head> 
<body> 
<div class="page-loader"> 
    <p>INTRO TEXT<br>(Will dissapear in 5 seconds)</p> 
</div> 
Rest Of Your Page 

<!-- JavaScripts Place At Bottom Of Page Before The </body> tag--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.page-loader').delay(5000).fadeOut('slow', function() { 
    $('.page-loader').remove(); 
    }); 
}); 
</script> 
</body> 
</html> 
+0

非常感謝該 – MaddoxSt

+0

是的,如果這個問題沒有一個是你在找什麼考慮檢查選中此複選框旁邊的複選標記,以便與您具有相同問題的其他用戶可以看到正確答案是什麼以及哪些方法有效 –

相關問題