显示图片消息的javascript

当用户访问我的主页时，我想在主页上显示一张节日快乐图片和一条消息，几秒钟后它就会消失。我想我必须用javascript或jquery来做，但我不知道怎么做。有没有这样的例子/教程

---

我知道有一些jquery插件，如lightbox、shadowbox等，但我不知道如何在页面加载时激活它们，所以我认为这与javascript有关。

使用jquery。请参阅文档和演示案例：。您将在此页面上找到大量的源代码，以便开始使用。

对于类似

<img src="x.png" alt="My Image" id="MyImage" />

请参见和

$（文档）.ready（函数（））{
setTimeout（“$（'#xmasdiv'）.fadeTo（300,0.0）；”，5000）；
//将5000更改为您希望延迟的毫秒数，
//和300到任何你想要的过渡速度。
//当然#xmasdiv应该指的是正确的DIV
//（如[圣诞节内容]）
});

---

这有帮助

既然您在问题中使用了html5和css标记，那么您可以通过简单的css3动画（为简洁起见，省略了其他前缀）来实现此效果

否则，您可以使用转换

#myimage {
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 5s;
}

#myimage.classAppliedOnDomReadyViaJavascript {
   opacity: 0;
}

在dom就绪事件中应用特定类，以便在给定时间开始转换

setTimeout(function() {
    var image = document.getElementById('hh'),
        step = 0.01,
        opacity = 1,
        interval = setInterval(function() {
           opacity = opacity - step;
           if (opacity < 0) {
                image.style.opacity = 0;
                clearInterval(interval);
                return false;
           }
           image.style.opacity = opacity;
        }, 1);
}, 5000);

<img id="hh" src="http://goo.gl/qEH6i" alt="" />

setTimeout（函数（）{
var image=document.getElementById（'hh'），
阶跃=0.01，
不透明度=1，
间隔=设置间隔（函数（）{
不透明度=不透明度-步长；
如果（不透明度<0）{
image.style.opacity=0；
间隔时间；
返回false；
}
image.style.opacity=不透明度；
}, 1);
}, 5000);

HTML:

setTimeout(function() {
    var image = document.getElementById('hh'),
        step = 0.01,
        opacity = 1,
        interval = setInterval(function() {
           opacity = opacity - step;
           if (opacity < 0) {
                image.style.opacity = 0;
                clearInterval(interval);
                return false;
           }
           image.style.opacity = opacity;
        }, 1);
}, 5000);

<img id="hh" src="http://goo.gl/qEH6i" alt="" />

另外：这是fadeTo（）函数文档。您也可以使用淡出（300）；作为一个速记，但我习惯于使用fadeTo来实现更简洁的控制。嗨，当我尝试上面的脚本时，什么都没有发生&当我使用firebug来查看我的错误时，它在参数列表“

$（document.ready”（function（）{/code>是否确保包含最后一行？}）后显示“missing”）；这是至关重要的。目前我没有看到任何缺少的括号..是的，我确实放了}）；但出于某种原因，我不知道这可能是Firebug本身的一个bug。你能试试看它是否显示同样的错误吗。谢谢，谢谢！你能把它作为一个块，这样我就可以复制和测试它了。我们需要安装一些jquery插件吗，或者只需要上面的代码就可以了-感谢DaveI，我想知道在显示图像后是否可以级联另一个重定向命令。我想做同样的事情，就像在这个问题的顶部答案中显示的一样。我想知道还有多久IE9才能成为至少90%的IE用户的最低标准，这样我们才能证明这种转变是合理的。在那之前，我想我们有jQuery。
<img id="hh" src="http://goo.gl/qEH6i" alt="" />