コレ(http://king-of-nowhere.hatenablog.com/entry/2013/11/28/084116)スゴイです。
全てDIV要素1つで1つの線なので、#(ID).remove() や、 #(ID).css({}) で、ID毎に、線を消したり、移動したりと重なりを考慮しなくてよいので大変便利です。
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
.line{
position: absolute;
border-top: solid 1px #FF4981;
-moz-transform-origin:0% 0%;
-webkit-transform-origin:0% 0%;
transform-origin:0% 0%;
float: left;
}
</style>
<script>
function DrawLine(params) {
var param = jQuery.extend({
ID: 0
, x1: 0
, y1: 0
, x2: 0
, y2: 0
, line_style: "solid"
, line_color: "#000"
, line_width: "1px"
, parent: $("body")
, callback: function(){}
}, params);
if(param.x1 < param.x2){
sx = param.x1;
sy = param.y1;
ex = param.x2;
ey = param.y2;
}
else {
sx = param.x2;
sy = param.y2;
ex = param.x1;
ey = param.y1;
}
var w = Math.sqrt(Math.pow((sx - ex) ,2) + Math.pow((sy - ey) ,2));
var base = Math.max(sx, ex) - Math.min(sx, ex);
var tall = Math.max(sy, ey) - Math.min(sy, ey);
var aTan = Math.atan(tall / base);
var deg = aTan * 180 / Math.PI;
deg = sy > ey ? 0 - deg: deg;
var line = $("<div id=" + param.ID + "></div>")
.addClass("line")
.css({
"left": sx,
"top": sy,
"width": w,
"transform": "rotate(" + deg + "deg)",
"-webkit-transform": "rotate(" + deg + "deg)",
"border-top-style": param.line_style,
"border-top-color": param.line_color,
"border-top-width": param.line_width,
});
$(param.parent).append(line);
}
$(document).ready(function()
{
DrawLine({
ID: "L2SW11P0-L2SW12P0",
x1: 0,
y1: 0,
x2: 100,
y2: 100,
});
DrawLine({
ID: "L2SW11P1-L2SW12P1",
x1: 100,
y1: 100,
x2: 200,
y2: 0,
});
for(var i=0; i<=10; i++){
$('#L2SW11P1-L2SW12P1').css({"left": 100 - i*10});
alert();
}
});
</script>
</head>
<body>
</body>
</html>
Xの値が、開始と終了の大きさが反転していると、おかしな動作になったので、必ず開始が小さくなるように条件分岐を入れてみました。
