我一直试图通过使用jQuery垂直动画来使图像看起来是浮动的。经过一些挖掘后，我遇到了这个线程：反复上下对div 进行动画处理 这恰恰有我需要的。将代码应用于我的网站后，我仍然无法弄清楚为什么图像的行为不像这里的示例。 这是我到目前为止的代码。
.HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
<!-- Checking to see if running properly
<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script> -->
</head>
<body>
<table id="wrapper">
<tr>
<td><img src="PixelBuddah.png" class="bouncer" alt="PixelBuddah" /></td>
</tr>
</table>
<footer>
<p>...</p>
</footer>
</body>
</html>
.CSS
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
body {
background-color: #F5E9D3;
}
footer {
display: inline-block;
float: right;
text-align: right;
margin: auto;
margin-right: 1.2em;
font-family: 'Noto Sans', sans-serif;
font-weight: 600;
}
爪哇语
function loop() {
$('.bouncer').animate({'top': '500'}, {
duration: 1000,
complete: function() {
$('.bouncer').animate({top: 0}, {
duration: 1000,
complete: loop});
}});
$('<div/>').text('exiting loop').appendTo($('.results'));
}
loop();
我对此还很陌生，所以任何帮助都值得赞赏！谢谢！
由于您要更改图像的位置，因此需要将位置属性添加到图像的 CSS 中。注意 CSS for img 标签
function loop() {
$('.bouncer').animate({'top': '500'}, {
duration: 1000,
complete: function() {
$('.bouncer').animate({top: 0}, {
duration: 1000,
complete: loop});
}});
$('<div/>').text('exiting loop').appendTo($('.results'));
}
loop();html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
body {
background-color: #F5E9D3;
}
footer {
display: inline-block;
float: right;
text-align: right;
margin: auto;
margin-right: 1.2em;
font-family: 'Noto Sans', sans-serif;
font-weight: 600;
}
img {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="wrapper">
<tr>
<td><img src="PixelBuddah.png" class="bouncer" alt="PixelBuddah" /></td>
</tr>
</table>
<footer>
<p>...</p>
</footer>
</body>