Javascript jQuery插件使一个元素环绕另一个元素?
修订版: 有任何jQuery插件可以使一个元素围绕另一个元素旋转吗Javascript jQuery插件使一个元素环绕另一个元素?,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,修订版: 有任何jQuery插件可以使一个元素围绕另一个元素旋转吗 编辑:所说的“环绕”,是指围绕另一个元素在同一个z指数上旋转。这个答案取代了我对这个问题的其他回答。 可以使用“.”方法修改元素的“top”和“left”属性。这是一个例子 HTML: Javascript: $('#moon').animate({left: 100}, 2000) .animate({top: 100}, 2000) .animate({left: 0},
编辑:所说的“环绕”,是指围绕另一个元素在同一个z指数上旋转。这个答案取代了我对这个问题的其他回答。
可以使用“.”方法修改元素的“top”和“left”属性。这是一个例子 HTML: Javascript:
$('#moon').animate({left: 100}, 2000)
.animate({top: 100}, 2000)
.animate({left: 0}, 2000)
.animate({top: 0}, 2000);
如果您想在几年前我制作的一个演示页面的原始Javascript中看到一些东西:
单击JavaScript演示按钮。页面没有压缩或缩小,因此JavaScript非常干净。下面是我开发的简单jQuery插件,用于提供您要求的“动态观察”功能。有关如何使用它的示例,请参见
( 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});
rotnew=(Math.asin(应收)*180)/Math.PI;
if(y
这三条线(放置在环内)允许每个“行星”保持垂直于轨道中心,当然,如果旋转物体是圆的,它不会做任何事情:D因为“轨道”在网络上根本不是什么常见的东西(你上次看到它是什么时候?),所以出现流行的,维护良好的通用“轨道”插件。你说的轨道是什么意思??有很多动画类型的旋转木马,但什么是轨道,是像其他内容旋转的内容吗?嘿,谢谢!这很好。我很高兴,这对我来说是一次很好的精神锻炼,我用剩下的几个脑细胞来挖掘我40多年前的三角知识。问候——写得很漂亮。我不喜欢这个。我不喜欢它,但我喜欢它。
$('#moon').animate({left: 100}, 2000)
.animate({top: 100}, 2000)
.animate({left: 0}, 2000)
.animate({top: 0}, 2000);
( 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});
<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>
#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;
}
rotnew = (Math.asin(a / r) * 180) / Math.PI;
if(y < s_x ){
rotnew = - rotnew;
}
p.css({'transform': 'rotate('+(rotnew)+'deg)'});