jQuery plugin to make an element orbit another?(jQuery插件使一个元素轨道另一个?)
问题描述
修订:有没有可以让一个元素围绕另一个元素旋转的 jQuery 插件?
REVISED: Are there any jQuery plugins that can revolve one element around another?
环绕"是指围绕另一个元素在同一个 z-index 上旋转.
By "orbiting", I mean rotating on the same z-index around another element.
推荐答案
下面是我开发的简单 jQuery 插件,用于提供您要求的轨道"功能.有关如何使用它的示例,请参阅 this fiddle.
Below is is simple jQuery plugin that I've developed to provide the "orbiting" functionality you asked for. See this fiddle for an example of how to use it.
( 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 是:
The HTML for this example is:
<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 是:
The CSS for this example is:
#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;
}
这篇关于jQuery插件使一个元素轨道另一个?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:jQuery插件使一个元素轨道另一个?
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01