移动div移动整个页面

Question

在我的博客中放置一些“移动”div，但它会移动我的整个页面，上下滚动(就像表格单元格一样)

如何停止‘移动’div，移动页面？

$(document).ready(function() {  
    
function moveDown() {
    $('.Fly').animate({'marginTop' : "+=100px"}, 1000,moveUp)
}

function moveUp(){
    $('.Fly').animate({'marginTop' : "-=100px"}, 1000,moveDown)
}    
 moveUp(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" width='500' style="border: 1px solid #000;">
<tr>
<th>
      
<div Class="Fly" style="position:relative; left: 280px; top: -580px;"></div> 
<div id="Superman"></div>   
         
<style>   
#Superman { background: url(http://www.comixoasis.com/v/vspfiles/templates/runner/images/homepage/Superman.png) no-repeat; width:250px; height:300px; background-size: 100%;       
}  
</style>
    
</th>      
</tr>
</table>

​

Answer 1

您需要在要移动的div上使用absolute position。

http://jsfiddle.net/re43q0z1/

因此，将您的HTML更改为：

<div Class="Fly" style="position:absolute; left: 280px; top: 80px; height: 300px; width: 300px;">&nbsp;</div> 

没有必要为图像添加额外的div。此外，您还需要更改所需的宽度和高度，或者只是嵌入图像。此外，理想情况下，样式应该使用样式表来完成。

而且您的Javascript只需要很小的更改就可以选择正确的div：$('.Fly')。

此外，还需要将用于设置背景图像的选择器从#Superman更改为.Fly。

Answer 2

您也可以尝试设置页面的高度，即表单元格小提琴的高度。

​

$(document).ready(function() {  
    
function moveDown() {
    $('.Fly').animate({'marginTop' : "+=100px"}, 1000,moveUp)
}

function moveUp(){
    $('.Fly').animate({'marginTop' : "-=100px"}, 1000,moveDown)
}    
 moveUp(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" width='500' height='320' style="border: 1px solid #000;position:absolute;">
<tr>
<th>
      
 
<div id="Superman" Class="Fly"></div>   
         
<style>   
#Superman { background: url(http://www.comixoasis.com/v/vspfiles/templates/runner/images/homepage/Superman.png) no-repeat; width:250px; height:300px; background-size: 100%;       
}  
</style>
    
</th>      
</tr>
</table>

​

Answer 3

​

$(document).ready(function() {  
    
function moveDown() {
    $('#Superman').animate({'top' : "+=100px"}, 1000,moveUp)
}

function moveUp(){
    $('#Superman').animate({'top' : "-=100px"}, 1000,moveDown)
}    
 moveUp(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" width='500' style="border: 1px solid #000;">
<tr>
<th>
      
<div Class="Fly" style="position:relative; left: 280px; top: -580px; height:300px;"></div> 
<div id="Superman" style="position:absolute;"></div>   
         
<style>   
#Superman { background: url(http://www.comixoasis.com/v/vspfiles/templates/runner/images/homepage/Superman.png) no-repeat; width:250px; height:300px; background-size: 100%;       
}  
</style>
    
</th>      
</tr>
</table>

​