0

如何在 jquery 中为越来越长的线条设置动画？我正在尝试连接两个 div，当其中一个 div 移动时，我需要这条线是动态的。因此，我需要线路变得更长。

4

4 回答 4

4 

<div id="a"></div>                                <!--div A-->
<div id="b"></div>                                <!--div B-->
<div id="line"></div>                             <!--Line -->

$("button").click(function () {
    var a = $("#a"),
        b = $("#b"),
        dW = b.offset().left - (a.offset().left),  //dX
        dH = b.offset().top - (a.offset().top),    //dY
        angle = Math.atan(dH / dW),                //angle
        length = Math.sqrt(dW * dW + dH * dH);     //length in between

    if(dW <0) angle += Math.PI;                    //some Math stuff

    $("#line").css({
        top: a.offset().top,                       //Where the line starts
        left: a.offset().left,
        width: 0,
        rotate: angle + "rad",                 //rotation (prefixes not included)
        transformOrigin: '0px 0px'
    }).animate({
        width: length                              //animation
    }, 3000);
});

现场演示：http: //jsfiddle.net/DerekL/UwDgq/

于 2013-03-10T04:20:23.663 回答
1

我假设你的 line 是一个 HTML 元素，即<div>或其他东西，所以你可以改变它的width属性。因此，通过增加width时间来为其设置动画。

于 2013-03-10T03:15:16.323 回答
0

你可以试试这个：

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" 
    type="text/javascript"></script>
    <style type="text/css">
    .drag{
          position:absolute;
          width:100px; 
          height:100px;
          border:1px solid #96C2F1; 
          background-color: #EFF7FF;
          cursor:move; 
          line-height:100px; 
          text-align:center;
    }
    .one{
        left:100px;
        top:100px;
    }
    .two{
        left:500px;
        top:100px;
    }
    .line{
        position: absolute;
        display: block;
        float: left;
        overflow:hidden;
    }
    </style>
    <script type="text/javascript">
        function drawQLine(x1, y1, x2, y2, color) {
            var wh = (x2 - x1) || 1;
            var hg = Math.abs(y2 - y1) || 1;
            var up = ((y1 - y2) > 0 ? -1 : 1);
            var rate;
            var wm;
            if (wh >= hg) {
                wm = "x";
                rate = wh / hg;
            } else {
                wm = "y"
                rate = hg / wh;
            }
            var srate = rate - Math.floor(rate);
            var sumSrate = 0;
            var xOffer = x1;
            var yoffer = y1;
            var body = $("body");
            $(".line").remove();
            if (wm == "x") {
                for (var i = 0; i < hg; i++) {
                    sumSrate += srate;

                    body.append($("<span class='line' style='margin-left:" + (xOffer - 7) + "px;margin-top:" + (yoffer) + "px;width:" + Math.floor(rate) + "px;height:1px;line-height:1px;background:" + color + ";'></span>"));
                    xOffer += Math.floor(rate);
                    yoffer += up;
                    if (sumSrate >= 1) {
                        body.append($("<span class='line' style='margin-left:" + (xOffer - 7) + "px;margin-top:" + (yoffer) + "px;width:1px;height:1px;line-height:1px;background:" + color + ";'></span>"));
                        sumSrate -= 1;
                        xOffer += 1;
                        yoffer += up;
                    }
                }
            }
            if (wm == "y") {
                for (var i = 0; i < wh; i++) {
                    sumSrate += srate;

                    body.append($("<span class='line' style='margin-left:" + (xOffer) + "px;margin-top:" + (yoffer) + "px;width:1px;height:" + Math.floor(rate) + "px;line-height:" + Math.floor(rate) + "px;background:" + color + ";'></span>"));
                    xOffer += 1;
                    yoffer += Math.floor(rate) * up;
                    if (sumSrate >= 1) {
                        body.append($("<span class='line' style='margin-left:" + (xOffer) + "px;margin-top:" + (yoffer) + "px;width:1px;height:1px;line-height:1px;background:" + color + ";'></span>"));
                        sumSrate -= 1;
                        xOffer += 1;
                        yoffer += up;
                    }

                }
            }
        }

        (function(document) {
            $.fn.Drag = function() {
                var M = false;
                var Rx, Ry;
                var t = $(this);
                t.mousedown(function(event) {
                    Rx = event.pageX - (parseInt(t.css("left")) || 0);
                    Ry = event.pageY - (parseInt(t.css("top")) || 0);
                    t.css("position", "absolute").css('cursor', 'move').fadeTo(20, 0.5);
                    M = true;
                })
                    .mouseup(function(event) {
                    M = false;
                    t.fadeTo(20, 1);
                });
                $(document).mousemove(function(event) {
                    if (M) {
                        t.css({
                            top: event.pageY - Ry,
                            left: event.pageX - Rx
                        });
                        drawConnectLine();
                    }
                });
            }
        })(document);

        function drawConnectLine() {
            var one = $("#divOne");
            var two = $("#divTwo");
            drawQLine(parseInt(one.css("left")) + one.width(),
            parseInt(one.css("top")) + one.height() / 2,
            parseInt(two.css("left")),
            parseInt(two.css("top")) + two.height() / 2,
                "red");
        }


        $(document).ready(function() {
            $("#divTwo").Drag();
            drawConnectLine();
        });
    </script>
</head>
<body>
    <div id="divOne" class="drag one">ONE</div>
    <div id="divTwo" class="drag two">TWO</div>
</body>
</html>

演示：http: //jsfiddle.net/af3qM/

于 2013-03-10T04:10:04.017 回答
0

假设您正在<hr>为您的行使用 an，或者即使您只是使用 div，您也可以简单地使用 jquery animate：

http://jsfiddle.net/cd9Xs/

于 2013-03-10T03:23:03.950 回答