以下脚本设置为由 jQuerymouseenter
事件触发,但现在需要在初始页面滚动时触发并每 10 秒重新运行一次,无需用户进行任何交互。令我沮丧的是,我无法使用这些规格创建工作版本。
我怀疑我需要使用 javascript 间隔,但我没有做对。
jQuery(document).ready(function($) {
function calcPoint(x1, y1, degrees, dist) {
var radians = degrees * (Math.PI / 180);
var x2 = Math.round(x1 + (Math.sin(radians) * dist));
var y2 = Math.round(y1 + (Math.cos(radians) * dist));
return [x2, y2];
}
var $cont = $('#bubbles');
var $items = $cont.find('li');
var distance = 500; // distance for the items to travel
var duration = 750; // milliseconds
var delay = 10000; // milliseconds
var explode = function() {
$items.each(function(i) {
var $item = $(this);
// store the original position
var pos = $item.position();
if ($item.data('starting') == undefined) {
$item.data('starting', pos);
}
//
var angle = Math.floor(Math.random()*(360 + 1));
var dest = calcPoint(pos.left, pos.top, angle, distance);
$item.animate({
left: dest[0],
top: dest[1],
opacity: 0,
}, duration);
});
};
$cont.one('mouseenter', explode);
$cont.mouseleave(function() {
$items.each(function() {
var $item = $(this);
var dest = $item.data('starting');
$item.animate({
left: dest.left,
top: dest.top,
opacity: 1
}, duration);
});
setTimeout(function() {
$cont.one('mouseenter', explode);
}, delay);
});