{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 混吃等死 的问题《How to animate a line to track a moving CSS elemen》','https://www.manongdao.com/q-681493.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have animated an array of css elements using jQuery, and the next stage is to track each element with a graphical straight line. One end of the line should remain fixed and one move with the element.
I thought I could accomplish this with SVG and the appropriate SVG jQuery plugin, but I've run into so many problems I wondered if I should just approach it from a different direction.
Below is the code for the animated boxes with three SVG lines so you can see what I'm getting at. There is also a JS fiddle of the site
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>
You could put the text and the elements in the same tag and style the position of the text.
Then you don't need to fix the animation of two objects.
Hope this is OK.