Question

放置一些＆＃39;移动＆＃39; div在我的博客中，但它移动我的整个页面，向上滚动＆amp;向下（如表格单元格）

如何停止＆＃39;移动＆＃39; divs，移动页面？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

移动div移动整页

3 个答案: