jQuery plugin để làm cho một phần tử quỹ đạo khác?

Question

ĐƯỢC SỬA ĐỔI: Có bất kỳ plugin jQuery nào có thể xoay quanh một phần tử khác không?

EDIT: Bằng cách "quay quanh", tôi có nghĩa là xoay trên cùng một chỉ mục z xung quanh một phần tử khác.

Answer 1

Dưới đây là plugin jQuery đơn giản mà tôi đã phát triển để cung cấp chức năng "quay quanh" mà bạn đã yêu cầu. Xem this fiddle để biết ví dụ về cách sử dụng.

(function ($) { 
     jQuery.fn.orbit = function(s, options){ 
      var settings = { 
          orbits: 1  // Number of times to go round the orbit e.g. 0.5 = half an orbit 
          ,period: 3000 // Number of milliseconds to complete one orbit. 
          ,maxfps: 25 // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power 
          ,clockwise: true // Direction of rotation. 
      }; 
      $.extend(settings, options); // Merge the supplied options with the default settings. 

      return(this.each(function(){ 
       var p  = $(this); 

/* First obtain the respective positions */ 

       var p_top = p.css('top'), 
        p_left = p.css('left'), 
        s_top = s.css('top'), 
        s_left = s.css('left'); 

/* Then get the positions of the centres of the objects */ 

       var p_x  = parseInt(p_top) + p.height()/2, 
        p_y  = parseInt(p_left) + p.width()/2, 
        s_x  = parseInt(s_top) + s.height()/2, 
        s_y  = parseInt(s_left) + s.width()/2; 

/* Find the Adjacent and Opposite sides of the right-angled triangle */ 
       var a  = s_x - p_x, 
        o  = s_y - p_y; 

/* Calculate the hypotenuse (radius) and the angle separating the objects */ 

       var r  = Math.sqrt(a*a + o*o); 
       var theta = Math.acos(a/r); 

/* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */ 

       var niters = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps)); 
       var delta = 2*Math.PI/niters; 
       var delay = settings.period/niters; 
       if (! settings.clockwise) {delta = -delta;} 
       niters  *= settings.orbits; 

/* create the "timeout_loop function to do the work */ 

       var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){ 
        setTimeout(function(){ 

/* Calculate the new position for the orbiting element */ 

         var w = theta + iter * delta; 
         var a = r * Math.cos(w); 
         var o = r * Math.sin(w); 
         var x = parseInt(s.css('left')) + (s.height()/2) - a; 
         var y = parseInt(s.css('top')) + (s.width()/2) - o; 

/* Set the CSS properties "top" and "left" to move the object to its new position */ 

         p.css({top: (y - p.height()/2), 
           left: (x - p.width()/2)}); 

/* Call the timeout_loop function if we have not yet done all the iterations */ 

         if (iter < (niters - 1)) timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings); 
        }, delay); 
       }; 

/* Call the timeout_loop function */ 

       timeout_loop(s, r, theta, delta, 0, niters, delay, settings); 
      })); 
     } 
    }) (jQuery); 

    $('#mercury').orbit($('#sun' ), {orbits: 8, period: 2000}); 
    $('#venus' ).orbit($('#sun' ), {orbits: 4, period: 4000}); 
    $('#earth' ).orbit($('#sun' ), {orbits: 2, period: 8000}).css({backgroundColor: '#ccffcc'}); 
    $('#moon' ).orbit($('#earth'), {orbits: 32, period: 500, maxfps: 20, clockwise: false});  
    $('#mars' ).orbit($('#sun' ), {orbits: 1, period: 16000}); 

HTML cho ví dụ này là:

<h1> The inner planets of the Solar System</h1> 
<div id='solar_system'> 
    <div id='sun' >SUN</div> 
    <div id='mercury'>m</div> 
    <div id='venus' >v</div> 
    <div id='earth' >e</div> 
    <div id='moon' >m</div> 
    <div id='mars' >m</div> 
</div> 

CSS ví dụ này là:

#solar_system {position: relative; width: 1600px; height: 1600px; background-color: #222222} 
#sun   {position: absolute; width: 80px; height: 80px; 
       top: 380px; left: 580px; background-color: #ffff00; 
       -moz-border-radius: 40px; border-radius: 40px; 
       text-align: center; line-height: 80px; 
} 
#mercury  {position: absolute; width: 18px; height: 18px; 
       top: 335px; left: 535px; background-color: #ffaaaa; 
       -moz-border-radius: 9px; border-radius: 9px; 
       text-align: center; line-height: 18px; 
} 
#venus  {position: absolute; width: 36px; height: 36px; 
       top: 300px; left: 500px; background-color: #aaaaff; 
       -moz-border-radius: 18px; border-radius: 18px; 
       text-align: center; line-height: 30px; 
} 
#earth  {position: absolute; width: 30px; height: 30px; 
       top: 200px; left: 400px; background-color: #ffaaaa; 
       -moz-border-radius: 15px; border-radius: 15px; 
       text-align: center; line-height: 30px; 
} 
#moon   {position: absolute; width: 12px; height: 12px; 
       top: 150px; left: 350px; background-color: #cccccc; 
       -moz-border-radius: 6px; border-radius: 6px; 
       text-align: center; line-height: 12px; 
} 
#mars  {position: absolute; width: 24px; height: 24px; 
       top: 100px; left: 200px; background-color: #ffaaaa; 
       -moz-border-radius: 12px; border-radius: 12px; 
       text-align: center; line-height: 24px; 
} 

Answer 2

TRẢ LỜI TRẢ LỜI NÀY ĐƯỢC BỊ CỨU B BYNG CÁCH CỨU KHÁC CỦA TÔI ĐẾN CÂU HỎI NÀY.

---

Bạn có thể sử dụng phương pháp "animate()" để thay đổi 'top' và 'trái' tính chất của nguyên tố này. Đây là example fiddle.

HTML:

<div id='moon' > moon </div> 
    <div id='earth'> earth </div> 

CSS:

#moon  {position:  absolute; 
      top:    0px; 
      left:   0px; 
      width:   50px; 
      height:   50px; 
      background-color: #aaaaff;} 
#earth  {position:  absolute; 
      top:    50px; 
      left:   50px; 
      width:   50px; 
      height:   50px; 
      background-color: #ffaaaa;} 

Javascript:

$('#moon').animate({left: 100}, 2000) 
      .animate({top: 100}, 2000) 
      .animate({left: 0}, 2000) 
      .animate({top: 0}, 2000);  

Answer 3

Nếu bạn muốn xem một cái gì đó trong tình trạng thô Javascript tôi đã thực hiện một năm trang demo trước:

Demo

Nhấp vào nút Trình diễn JavaScript. Trang không được nén hoặc rút gọn để JavaScript rất sạch sẽ.

Answer 4

rotnew = (Math.asin(a/r) * 180)/Math.PI; 

if(y < s_x){ 
    rotnew = - rotnew; 
     } 
p.css({'transform': 'rotate('+(rotnew)+'deg)'}); 

Ba dòng (đặt bên trong vòng lặp) cho phép mỗi " hành tinh "vẫn vuông góc với trung tâm quỹ đạo, nó không làm bất cứ điều gì nếu đối tượng quay tròn tất nhiên: D