2012-03-02 103 views
3

的jsfiddle:http://jsfiddle.net/yJJs7/这个圆圈为什么不围绕正确的中心旋转?

的Javascript:

function main(){ 
    var centerx=250; 
    var centery=250; 
    var degrees=0; 
    var div=document.getElementById('test'); 
    var move=function(){  
     if(degrees>360)degrees=degrees%360; 
     var radians = degrees*Math.PI/180; 
     var newx = Math.cos(radians)*100; 
     var newy = Math.sin(radians)*100; 
     div.style.top=(newy+centery)+'px'; 
     div.style.left=(newx+centerx)+'px'; 
     degrees+=10; 
    }; 
    setInterval(move,50); 
    console.log(div); 
} 
main(); 

HTML:

<div id="test"></div> 
<div id="test2"></div> 

CSS:

#test{ 
    height:100px; 
    width:100px; 
    background:black; 
    border-radius:100px; 
    position:fixed; 
} 
#test2{ 
    position:fixed; 
    height:30px; 
    width:30px; 
    background:black; 
    border-radius:30px; 
    position:fixed; 
    top:250px; 
    left:250px; 
} 

第二个div以250x250像素为中心,第一个div应该围绕它旋转。为什么不是?

+0

+1 :-)纯JS 2D动画一个有趣的问题 – Satish 2012-03-03 00:12:45

回答

7

你的公式计算为圆心的新位置,但style.top/style.left从顶部/最左边的圆上的点的话,你需要减去半径:

div.style.top=(ny+cy-35)+'px'; 
div.style.left=(nx+cx-35)+'px'; 

http://jsfiddle.net/yJJs7/1/


这将绕小圈(265,265)的中心旋转,而不是(250,250),因此你可能要抵消小圈子中的CSS:

#test2{ 
    ... 
    top:235px; 
    left:235px; 
} 

div.style.top=(ny+cy-50)+'px'; 
div.style.left=(nx+cx-50)+'px'; 

http://jsfiddle.net/yJJs7/7/

+0

似乎是正确的对我来说 - http://jsfiddle.net/yJJs7/2/ – mrtsherman 2012-03-03 00:10:47

+0

太棒了,那真是个可怕的小姐。 – mowwwalker 2012-03-03 00:17:03

0

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <style> 
    #test { 
     height:100px; 
     width:100px; 
     background:black; 
     border-radius:100px; 
     position:fixed; 
    } 
    #test2 { 
     position:fixed; 
     height:30px; 
     width:30px; 
     background:black; 
     border-radius:30px; 
     position:fixed; 
     top:250px; 
     left:250px; 
    } 
    </style> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script> 
    $(document).ready(function (e) { 
     main(100); 
    }); 

    function main(distance) { 

     var $this = $("#test2"); 
     var offset = $this.offset(); 
     var width = $this.width(); 
     var height = $this.height(); 

     var cx = offset.left + width/2; 
     var cy = offset.top + height/2; 

     var i = 0; 
     var $div = $('#test'); 
     var divOffset = $div.offset(); 
     var divWidth = $div.width(); 
     var divHeight = $div.height(); 

     var move = function() { 
      if (i > 360) i = i % 360; 
      var j = i * Math.PI/180; 
      var nx = Math.cos(j) * distance; 
      var ny = Math.sin(j) * distance; 
      var left = nx + cx - divWidth/2 
      var top = ny + cy - divHeight/2 

      $div.offset({ 
       top: top, 
       left: left 
      }); 

      i += 10; 
     }; 

     setInterval(move, 50); 

    } 
    </script> 
</head> 

<body> 
    <div id="test"></div> 
    <div id="test2"></div> 
</body>