Question

我试图找到一种方法让网页上的图像从顶部和底部向下浮动。我已经开始使用从顶部漂浮的那个。

代码

这是我到目前为止的原型/测试代码：

<!DOCTYPE html>
<html>
        <head>
                <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
                <meta content="utf-8" http-equiv="encoding">
                <title>Title of the document</title>
                <script src="jquery.js"></script>
<script>

$(document).ready(function() {
       var image = document.getElementById("myimage");
       image.style.display = "block";

        $("#myimage").animate({ 
            marginTop: "400px", 
        }, 10000, "linear"); 
    }); 
/*
$(document).ready(function() {
        $("#myimage_wrapper").animate({ 
            top: "+=400", 
        }, 10000, "linear"); 
    }); 
*/
</script>

        </head>
        <body>
                <h1>This is a float test</h1>
                <div id="myimage_wrapper">
                        <img id="myimage" src="myimage.jpg" marginTop="0" height="199px" width="253" style="display: none"/>
                </div>
                <h1>this should not move but it does</h1>
        </body>
</html>

什么有用/什么无效

因此，上面的代码会将“myimage”图像从页面上的起始位置向下移动几页，这很棒。但我有两个问题：

我希望图像看起来好像是从页面外进来的。有点像苹果在这里：http://www.apple.com/iphone-6s/
另一个问题是我希望图像移动而不移动页面上的其他元素。

我到目前为止

我一直在玩DIV标签，看看是否有办法防止图片标签下的元素移动。但到目前为止，没有成功。

我也一直在审核这个例子：jQuery animate one Div to move down when another one animates up 但是还没有能够从这里应用课程......

感谢。

Answer 1

这是一个加载的问题。

首先，我会接近你想要的动画，完全不同。不幸的是，我不确定你正在尝试的效果，但我相信这是like this very basic example

您正在制作动画的元素位于文档流程中，并会调整相邻元素，因为它占用的空间更多（margin-top正在使元素x大得多）。您可以使用position property从文档流中删除元素。有时最好制作一个元素position: absolute，有时你不需要依赖其他变量（显式heights或元素大小？）。

此外，我不会亲自动画margin-top，但使用我在我的示例中显示的transform: translate3d(0, -150px, 0);这样的属性，我个人会通过css亲自执行此操作，只需触发帮助{{1}用jQuery。

这是your fiddle without影响任何元素定位的图像，但这又是一个原始示例，为了提供一个好的方法，最好知道这里的真实目标。

Answer 2

为了防止移动对象影响页面的其余部分，必须将其从文档流中取出。这是通过css样式＆＃34; position：absolute;＆＃34;。

完成的

如果将此样式添加到css中，则代码可以正常工作;

class

看到这个小提琴：http://jsfiddle.net/1wjkrk2d/

Answer 3

这有助于您入门吗？我在div中替换的图像从侧面进入而不会破坏文本的其余部分。堆栈溢出似乎需要超时，但不应该是必需的

$(document).ready(function() {

  setTimeout(function() {
             $("#diamond").removeClass("offscreen");
    }, 100);
});

#diamond.offscreen {
  transform: translateX(-100%);
    transition: all 2s;
}

#diamond {
  background-color:steelblue;
  height: 199px;
  width: 253px;
  transform: translateX(0);
  transition: all 2s;
  -webkit-transition: all 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>This is a float test</h1>
<div id="diamond_wrapper">
  <div id="diamond" height="199px" width="253" class="offscreen" />
</div>
<h1>this should not move but it does</h1>

Answer 4

为什么不将diamond_wrapper设置为position:absolute。这样，元素就会超出正常的页面流。

.diamond_wrapper {
    position: absolute;
}

Answer 5

不需要任何JS。这就是你所需要的：

@keyframes odd {
0% {transform: translate(0px,-400px); }
50% {transform: translate(0px,400px); }
100% {transform: translate(0px,-0px); }

}

检查一下，如果你想对此进行一些修改，请告诉我。

http://codepen.io/damianocel/pen/JYBEdB

jquery animate（） - 如何移动/动画只是页面的一部分？

5 个答案: