Javascript动画gif转发 [英] Javascript animated gif forwarding
问题描述
我有以下代码并出现以下问题:
i have the following code and got the following problem:
我想在加载页面时显示动画gif. 3秒后，我想禁用gif并显示一条存储在会话中的消息.
i would like to have an animated gif to show up on loading a page. after 3 seconds i would like to disable the gif and show a message that is stored in a session.
意识到我有以下计数器.我的问题是我不知道如何让gif消失并带来味精div.可以帮我一下吗.非常感谢
to realise that i have the following counter. my problem is that i dont know how to let the gif disappear and bring in the msg div. could some please help me out. thanks alot
<body>
<script type="text/javascript">
var counter = 3;
var url ="";
function downcount() {
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 ) {
window.location.href=url;
} else {
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
</script>
<div class="loading">
<img src="loading/loading40.gif"
</div>
<div class="msg">
<?PHP echo $_SESSION['msg'];?>
</div>
好的，现在我得到了该代码，但是仍然无法正常工作:
ok, now i got that code but it´s still not working:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style>
.loading { display: block; }
.msg { display: none; }
</style>
</head>
<body>
<script type="text/javascript">
var counter = 3;
var url ="";
var loadingGif = function(){
document.getElementsByClassName('loading').style=display:none;
document.getElementsByClassName('msg').style=display:block;
}
setTimeout('loadingGif()', 3000);
window.onload=loadingGif();
var loadingGif = function(){
$(".loading").delay(3000).animate({ opacity: 0 }, '100', function(){
$(".msg").css({"display" : "block" });
});
window.onload=loadingGif();}
function downcount()
{
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 )
{
window.location.href=url;
}else{
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
window.onload=loadingGif();
</script>
<div class="loading">
<img src="loading/loading40.gif" />
</div>
<div class="msg">
<?php echo $_SESSION['message']; ?>
</div>
推荐答案
您应将其添加为变量.
var loadingGif = function(){
document.getElementsByClassName('loading').style=display:none;
document.getElementsByClassName('msg').style=display:block;
}
setTimeout('loadingGif()', 3000); //change the opacity of the loading gif to 0 after 3 seconds, and then load the message block.
我还建议您使用jQuery扩展选项并加强操作.
I would also recommend using jQuery to expand options and tighten things up.
var loadingGif = function(){
$(".loading").delay(3000).hide('100', function(){
$(".msg").css({"display" : "block" });
}); //after 3 seconds animate the div to display:none; in 1/10th of a second
}
确保将.loading设置为display:block，并将.msg设置为display:none.
Make sure that .loading is set to display:block, and .msg is set to display:none.
这篇关于Javascript动画gif转发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
