jquery - 使用 jQuery 画线

Question

我有一个客户想要这样的登录页面：

他想要的是将中心图像与其他图像连接起来的线条进行动画处理（就像它们是从起点绘制到终点一样）。

有没有 jQuery 插件来实现这一点？

谢谢！

Answer 1

您可以使用 HTML 5 画布和直接 JS 进行绘制：

使用此 HTML：

<canvas id="mycanvas" width=500></canvas>

而这个Javascript：

x = 50;
y = 75
startx = 0;
starty = 75;

function drawIt() {

    var c = document.getElementById("mycanvas");
    var ctx = c.getContext("2d");

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "blue"; // Green path
    ctx.moveTo(startx, starty);
    ctx.lineTo(x, y);

    ctx.stroke(); // Draw it    
    if (x > 350) {
        window.clearInterval(timerId);
    } else if (y <= 25 && x >= 250) {
        starty = 25;
        x += 5;
    } else if (y <= 75 && x >= 250) {
        x = startx = 250;
        y -= 5;
    } else {
        x += 5;
    }
}
timerId = window.setInterval(drawIt, 30);

小提琴示例：http: //jsfiddle.net/YjTsf/