我正在尝试找到一种方法让网页上的图像从顶部和底部向下 float 。我从顶部漂浮的那个开始。
(代码也可在 http://jsfiddle.net/trjthtpf/ 获得)
代码
这是我目前的原型(prototype)/测试代码:
<!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 但是还不能在这里应用那里的经验教训......
谢谢。
最佳答案
为了防止移动的对象影响页面的其余部分，它必须从文档流中移除。这是通过 css 样式“position:absolute;”完成的。
如果您将此样式添加到您的 css，您的代码可以正常工作；
#diamond_wrapper {
position:absolute;
top: -300px;
left: 100px;
}
请看这个 fiddle :http://jsfiddle.net/1wjkrk2d/
关于javascript - jquery animate() - 如何只移动/动画页面的一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33484794/