Question

当用户访问该页面时，我想在我的主页上显示一个Happy Holidays图片以及一条消息，它会在几秒后消失。我想我必须在javascript或jquery中做，但我不知道该怎么做。是否有任何示例/教程可以做到这一点。

我知道有一些jquery插件，如灯箱，阴影框等，但我不知道如何在页面加载时激活它们，所以我认为它与javascript有关。

Answer 1

对于像

这样的图像

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

下面的jQuery库javascript将在5秒后将其淡出

setTimeout(function()
{
    $("#MyImage").fadeOut('fast');
}, 5000);

请参阅http://www.w3schools.com/jsref/met_win_settimeout.asp和http://api.jquery.com/fadeOut/

Answer 2

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

#myimage {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
}


@-webkit-keyframes fadein {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

否则您可以使用过渡

#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 ready事件中应用特定类，以便转换可以在给定时间开始

Answer 3

$(document).ready(function(){
     setTimeout("$('#xmasdiv').fadeTo(300,0.0);",5000); 
     // change the 5000 to however many miliseconds you want delay,
     // and the 300 to whatever speed of transition you wish to.
     // And of course #xmasdiv should refer to the right DIV
     // (like <div id="xmasdiv">[xmas content]</div>)
});

这会有所帮助。

Answer 4

<强> JS：

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);

<强> HTML：

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

Answer 5

使用Jquery。请参阅文档和展示案例：http://jqueryui.com/demos/animate/。您可以在此页面上找到大量的资源来帮助您入门。

javascript显示图片信息

5 个答案: