動畫變長線

1

我假設你的行是一個HTML元素，即<div>什麼的，所以你可以改變它的width屬性。所以通過增加width隨着時間的推移來增加動畫效果。

來源

2013-03-10 03:15:16 sweetamylase

+0

'我需要的線是動態的的DIV舉措之一around.'直線將無法正常工作，如果它也移動在y -軸。 – 2013-03-10 04:03:15

0

假設你使用的是<hr>爲您的生產線，或者即使你只是用一個div，你可以簡單地使用jQuery的動畫：

http://jsfiddle.net/cd9Xs/

來源

2013-03-10 03:23:03 Bernie

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-10 04:10:04 artwl

+0

真的......你用很多'div'填充了路徑... – 2013-03-10 04:42:23

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-10 04:20:23

回答

相關問題