如何在html中横向移动元素

Question

Hellow我有一个关于元素横向移动的问题。 我的网页上有图片，上下移动，左右移动，但不能将它们移到一边。我使用jquery作为我的脚本。你有什么选择如何横向移动图片？ 非常感谢你的帮助。

Answer 1

你可以使用jquery .animate函数

脚本：

  $(document).ready(function() {

    $('#reset').hide();
    $('#move').click(function() {
        $('#left').animate({
        'marginLeft' : "-=100%", //moves left
        'marginTop' : "+=100%" //moves left
        });
        $('#right').animate({
        'marginRight' : "-=100%", //moves right
        'marginTop' : "+=100%" //moves left
        });
        $('#move').hide();
        $('#reset').show();
    });

    $('#reset').click(function() {
        $('#left').animate({
        'marginLeft' : "+=100%", //moves left
        'marginTop' : "-=100%" //moves left
        });
        $('#right').animate({
        'marginRight' : "+=100%", //moves right
        'marginTop' : "-=100%" //moves left
        });
        $('#reset').hide(); 
        $('#move').show();
    });


})

样式：

.main-div{
    overflow: hidden;
}
.left-div {
    background:green;
    width:50%;
    float:left;

}
.right-div {
    background:blue;
    width:50%;
    float:right;
}

html body

<div class="main-div">
<div align="center"> 
    <button id="move">Move</button>
    <button id="reset">Reset</button>
</div>
<div id="left" align="center" class="left-div">text and image left<br><img src="http://webnevisan.ir/templates/beez_20/images/logo.png"></div>
<div id="right" align="center" class="right-div">text and image right<br><img src="http://webnevisan.ir/templates/beez_20/images/logo.png"></div>

我在评论后编辑了代码： 这是演示，向下移动和侧身 看看这个demo link

Answer 2

找到答案 你可以将两个属性放入函数中 动画（顶部：＆＃39; + = 100＆＃39;，左：＆＃39; + = 100＆＃39;}，1000）; 这使它平行移动。 谢谢大家