3

更新 -我曾请求帮助修复我第一次尝试使用 SVG animate 插件，现在有一个解决方案（按照这个链接），它有效地回答了这个问题。尽管 Jleagle 指出的 attr() 也可能导致解决方案

我已经使用 jQuery 为一组 css 元素设置了动画，下一阶段是使用图形直线跟踪每个元素。线的一端应保持固定，并与元素一起移动。

我认为我可以使用 SVG 和适当的 SVG jQuery 插件来完成此操作，但我遇到了很多问题，我想知道我是否应该从不同的方向处理它。

下面是带有三个 SVG 行的动画框的代码，因此您可以看到我在做什么。还有一个网站的 JS fiddle

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

您可以将文本和元素放在同一个标​​签中并设置文本位置的样式。
然后你不需要修复两个对象的动画。
希望这没问题。

于 2012-05-10T14:23:13.767 回答