3

更新-私はSVGアニメーションプラグインを使用してこれを最初に試みた修正の助けを求めていました。これは現在、この質問に効果的に答える解決策があります（このリンクをたどってください）。Jleagleが指摘したattr（）も解決策につながる可能性がありますが

jQueryを使用してcss要素の配列をアニメーション化しました。次の段階は、グラフィカルな直線で各要素を追跡することです。線の一方の端は固定されたままで、もう一方の端は要素とともに移動する必要があります。

SVGと適切なSVGjQueryプラグインでこれを達成できると思いましたが、別の方向からアプローチする必要があるのではないかと思うほど多くの問題に遭遇しました。

以下は、3つのSVG行を含むアニメーションボックスのコードです。これにより、私が何をしているのかがわかります。サイトのJSフィドルもあります

Javascript

$(function() {
var balloons = [$("#box1"), $("#box2"), $("#box3")];

var lines = [$("#line1"), $("#line2"), $("#line3")];

function act(jqObj, speed, change) {

    jqObj.animate({
        'left' : change
    }, speed).animate({
        'left' : -change
    }, speed, function() {
        act(jqObj, speed, change);
    });

};
for( i = 0; i < balloons.length; i++) {
    var speed = 2000 + Math.random() * 501;
    var change = 10 + Math.random() * 26;

    act(balloons[i], speed, change);
}
});

HTML / CSS

<html>
<head>
    <title>Proof of Concept Page</title>
    <style type="text/css">
        .html .body {
            position: absolute;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: red;
        }
        #box1 {
            margin-left: 300px;
            margin-top: 60px
        }
        #box2 {
            margin-left: 500px;
            margin-top: 20px
        }
        #box3 {
            margin-left: 700px;
            margin-top: 50px
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>

</head>
<body>

    <div  class="box" id="box1">
        Proj 1
    </div>
    <div  class="box" id="box2">
        Proj 2
    </div>
    <div  class="box" id="box3">
        Proj 3
    </div>

    <svg id="linePad" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line id="line1" x1="350" y1="160" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
        <line id="line2" x1="550" y1="120" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
        <line id="line3" x1="750" y1="150" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>

</body>
</html>
4

1 に答える 1

1

テキストと要素を同じタグに配置して、テキストの位置をスタイルできます。
そうすれば、2 つのオブジェクトのアニメーションを修正する必要はありません。
これで問題ないことを願っています。

于 2012-05-10T14:23:13.767 に答える