jsfiddle Example with animation

Question

在我的网站上，我想从页面底部显示一个图像，然后上升到页面顶部，但我无法弄清楚如何隐藏页面底部的图像。

如何做到这一点？我已尝试在position:relative和overflow:hidden标记上添加<body>和<html>，然后尝试将图片放入大于position:absolute的图片<body>和<html>都有，但窗口总是向下滚动 -

示例：

我尝试了这两个不起作用的版本 -

<html style="position:relative">
   <body>
      <img style="top:1000px; position: absolute;" src="~/images/MyImage.png" />
   </body>
</html>

<html>
   <body style="position:relative">
      <img style="top:1000px; position: absolute;" src="~/images/MyImage.png" />
   </body>
</html>

Answer 1

您需要使用固定定位，将图像相对于viewpor定位：

position: fixed;

然后使用top/left/bottom/right将其放置在任意位置。例如：

top: 100%;

将其移出视口。然后在您希望将图像移回时添加：

top: 0;

用于何时激活它。

要使图像具有动画效果，请将样式添加到图像中：

transition: all 1s ease;
-webkit-transition: all 1s ease;

jsfiddle Example with animation

CSS

img {
    position: fixed;
    top: 100%;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

img.active  {
    top: 0;
}

JS

$(document).on('ready', function () {
    setTimeout(function () {
        $('img').addClass('active');
    }, 3000)
});

HTML

<img src="http://lorempixel.com/400/200/sports" alt="">

Answer 2

这个想法是：

position: absolute; bottom: 0px;

这确保它在ABSOLUTE底部。意思是页面的底部。然后，当你有这个：

position: absolute; top: 0px;

它是绝对的顶级。

要为它制作动画，我必须使用jQuery做一些不同的事情。我将bottom设为70％，但这非常疏忽。参见：

http://jsfiddle.net/KF83U/1/

隐藏网页底部的图像

2 个答案:

jsfiddle Example with animation