更新 -我曾请求帮助修复我使用 SVG 动画插件的第一次尝试，现在有一个解决方案（点击此链接），它有效地回答了这个问题。尽管 Jleagle 指出的 attr() 也可以找到解决方案 https://stackoverflow.com/questions/10526137/problems-using-the-jquery-svg-animation-plugin-on-a-line
我使用 jQuery 对 css 元素数组进行了动画处理，下一阶段是使用图形直线。线的一端应保持固定，一端随元件移动。
我以为我可以使用 SVG 和适当的 SVG jQuery 插件来完成此任务，但我遇到了很多问题我想知道我是否应该从不同的方向来处理它。
下面是带有三行 SVG 线的动画框的代码，这样你就可以明白我的意思。该网站还有一个 JS fiddle http://jsfiddle.net/BWbJj/7/
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>
