Javascript 定位JS动画div

我正在尝试制作3个

DIV

s以使用

JS

移动并将它们放置在页面的右侧，我已经完成了动画脚本，但是位置不正确。在手机上，它位于我的

#header

部分的其他div之上，而且它非常靠左。在

PC:s

上，它离左边很远。 有没有办法让我的动画保持这种方式，但使它在包装内？这样它就不会改变它在手机和PC上的位置：s

HTML:

JS:

---

我认为在您的情况下，最好使用CSS3动画。这样，您只需调用

$（'div#clouds-1'）.addClass（）

，而不是.animate（），并调整css以在移动和桌面上工作

，就像pixelcdv所说的那样，这对于这样的简单移动是完美的

我使用了你的代码（全部以百分比表示）

基于html的CSS：

div#clouds-1 {
    position: absolute;
    width: 30%;
    height: 20%;
    top: 15%;
    left: 35%;
    background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudOne 16s infinite;
    -moz-transition: cloudOne 16s infinite;
    -o-transition: cloudOne 16s infinite;
    transition: cloudOne 16s infinite;
    animation: cloudOne 16s infinite;
}
@keyframes cloudOne {  
    0% {
        top:15%;
        left: 35%;
    }
    50% {
        top:7%;
        left: 20%;
    }
    100% {
        top:15%;
        left: 35%;
    }
}

div#clouds-2 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:20%;
    left: 45%;
    background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudTwo 16s infinite;
    -moz-transition: cloudTwo 16s infinite;
    -o-transition: cloudTwo 16s infinite;
    transition: cloudTwo 16s infinite;
    animation: cloudTwo 16s infinite;
}

@keyframes cloudTwo {  
    0% {
        top:20%;
        left: 45%;
    }
    50% {
        top:35%;
        left: 15%;
    }
    100% {
        top:20%;
        left: 45%;
    }
}

div#clouds-3 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:30%;
    left: 50%;
    background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudThree 16s infinite;
    -moz-transition: cloudThree 16s infinite;
    -o-transition: cloudThree 16s infinite;
    transition: cloudThree 16s infinite;
    animation: cloudThree 16s infinite;
}

@keyframes cloudThree {  
    0% {
        top:30%;
        left: 50%;
    }
    50% {
        top:5%;
        left: 65%;
    }
    100% {
        top:30%;
        left: 50%;
    }
}

---

我从来没有想过，但是我从来没有使用过CSS3动画。你有任何链接到一些例子，e-bbok教程或视频吗？pixelxdv是对的，CSS动画看起来很适合这个。有很多教程，只需在此处搜索“css动画关键帧事件”之类的内容，例如：，或在那里：，但我相信那里有更好的教程谢谢你的回答！

div.wrapper {
    margin: 0 auto;
    padding: 0 20px;
    min-width: 1024px;
    width: 1024px;
}

div#intro-right {
    float: right;
}

div#clouds-1 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 100px;
    right: 150px;
    background: url("img/clouds_bg_1.png") no-repeat;
    opacity: 0;
}

div#clouds-2 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 110px;
    right: 150px;
    background: url("img/clouds_bg_2.png") no-repeat;
    opacity: 0;
}

div#clouds-3 {
    position: absolute;
    width: 420px;
    height: 260px;
    margin-top: 130px;
    right: 150px;
    background: url("img/clouds_bg_3.png") no-repeat;
    opacity: 0;
}

$(document).ready(function() {
    $("div#clouds-1").animate({
        opacity:'0.4'
    }, 1450);

    $("div#clouds-2").animate({
        opacity:'0.6'
    }, 1450);

    $("div#clouds-3").animate({
        opacity:'0.8'
    }, 1450);
});

$(document).ready(function() {
    function moveRight1() {
        $("div#clouds-1").animate({
           top:'-=24px',
           right: '+=50px',
           opacity: '0.9'
        }, 8000, moveLeft1);
    }

    function moveLeft1() {
        $("div#clouds-1").animate({
            top:'+=24px',
            right: '-=50px',
            opacity: '0.4'
        }, 8000, moveRight1);
    }
    moveRight1();

    function moveRight2() {
        $("div#clouds-2").animate({
           top:'-=24px',
           right:'-=50px',
           opacity: '0.9'
        }, 8000, moveLeft2);
    }

    function moveLeft2() {
        $("div#clouds-2").animate({
            top:'+=24px',
            right:'+=50px',
            opacity: '0.6'
        }, 8000, moveRight2);
    }
    moveRight2();

    function moveRight3() {
        $("div#clouds-3").animate({
           top:'+=24px',
           right:'+=100px',
           opacity: '0.4'
        }, 8000, moveLeft3);
    }

    function moveLeft3() {
        $("div#clouds-3").animate({
            top:'-=24px',
            right:'-=100px',
            opacity: '0.8'
        }, 8000, moveRight3);
    }

    moveRight3();
});

div#clouds-1 {
    position: absolute;
    width: 30%;
    height: 20%;
    top: 15%;
    left: 35%;
    background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudOne 16s infinite;
    -moz-transition: cloudOne 16s infinite;
    -o-transition: cloudOne 16s infinite;
    transition: cloudOne 16s infinite;
    animation: cloudOne 16s infinite;
}
@keyframes cloudOne {  
    0% {
        top:15%;
        left: 35%;
    }
    50% {
        top:7%;
        left: 20%;
    }
    100% {
        top:15%;
        left: 35%;
    }
}

div#clouds-2 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:20%;
    left: 45%;
    background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudTwo 16s infinite;
    -moz-transition: cloudTwo 16s infinite;
    -o-transition: cloudTwo 16s infinite;
    transition: cloudTwo 16s infinite;
    animation: cloudTwo 16s infinite;
}

@keyframes cloudTwo {  
    0% {
        top:20%;
        left: 45%;
    }
    50% {
        top:35%;
        left: 15%;
    }
    100% {
        top:20%;
        left: 45%;
    }
}

div#clouds-3 {
    position: absolute;
    width: 30%;
    height: 20%;
    top:30%;
    left: 50%;
    background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
    opacity: .9;
    -webkit-transition: cloudThree 16s infinite;
    -moz-transition: cloudThree 16s infinite;
    -o-transition: cloudThree 16s infinite;
    transition: cloudThree 16s infinite;
    animation: cloudThree 16s infinite;
}

@keyframes cloudThree {  
    0% {
        top:30%;
        left: 50%;
    }
    50% {
        top:5%;
        left: 65%;
    }
    100% {
        top:30%;
        left: 50%;
    }
}