[英]Fade in page background image on load with jQuery
我想在我的頁面加載時使用 jQuery 淡入 CSS 頁面背景圖像。 我知道可以使用 jQuery 設置 CSS 頁面背景圖像,並且在頁面加載時也可以淡入文本,但我不知道如何做到這兩點。
您可以通過執行以下操作在 jQuery 中設置 CSS 背景圖像:
showBackground($("body").css({"background-image":"url(yourimage.jpg)"}));
您可以通過執行以下操作淡入文本:
$(document).ready(function(){
$('#fade').hide();
$('#fade').append('This text should fade in.');
$('#fade').fadeIn();
});
您可以在頁面加載時加載正文背景圖像,但要使其淡化,您需要使用其他一些操作,例如放置一個 100% 高寬的div
來保存背景圖像。 我試過跟隨,它在文本和背景中都消失了(在 div 中)。
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:100%
!important; height:100% !important;
background-image:url('DSC00667.jpg');z-index:-1000;">
</div>
<div style="top:0;left:0;position:absolute;">
<div id="d" style="height:200px;width:500px;margin:0 auto;top:0;
clear:none;z-index:100;">
this is text div that will fade in.
</div>
<div style="clear:both;height:1px !important;"> </div>
</div>
<script type="text/javascript">
$(function(){
$("#b").fadeIn();
$('#d').hide().append('This text should fade in.').fadeIn();
});
</script>
</body>
</html>
更少的樣式元素也可以工作,但我沒有測試過。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.