gpt4 book ai didi

jQuery 弹跳变体(弹跳)

转载 作者:行者123 更新时间:2023-12-01 06:56:59 27 4
gpt4 key购买 nike

我正在努力寻找为此目的的插件/插件,它是我项目的关键部分,我忽略了它,现在它咬了我。

我需要 jQuery 弹跳的变体,它使 div 无限期地围绕父 div/包装器弹跳。

实际上,我将拥有一个屏幕,用户通过单击生成 div,然后它们在屏幕上 float /弹跳。

请帮助我找到一个插件或一些代码来解决这个问题。

非常感谢

最佳答案

我无法告诉您 100 个 div 的响应速度如何,但根据之前的脚本,这里至少可以帮助您入门 — http://jsfiddle.net/jgJsL/5/ :

$.fn.bounce = function(options) {

var settings = $.extend({
speed: 10
}, options);

return $(this).each(function() {

var $this = $(this),
$parent = $this.parent(),
height = $parent.height(),
width = $parent.width(),
top = Math.floor(Math.random() * (height / 2)) + height / 4,
left = Math.floor(Math.random() * (width / 2)) + width / 4,
vectorX = settings.speed * (Math.random() > 0.5 ? 1 : -1),
vectorY = settings.speed * (Math.random() > 0.5 ? 1 : -1);

// place initialy in a random location
$this.css({
'top': top,
'left': left
}).data('vector', {
'x': vectorX,
'y': vectorY
});

var move = function($e) {

var offset = $e.offset(),
width = $e.width(),
height = $e.height(),
vector = $e.data('vector'),
$parent = $e.parent();

if (offset.left <= 0 && vector.x < 0) {
vector.x = -1 * vector.x;
}
if ((offset.left + width) >= $parent.width()) {
vector.x = -1 * vector.x;
}
if (offset.top <= 0 && vector.y < 0) {
vector.y = -1 * vector.y;
}
if ((offset.top + height) >= $parent.height()) {
vector.y = -1 * vector.y;
}

$e.css({
'top': offset.top + vector.y + 'px',
'left': offset.left + vector.x + 'px'
}).data('vector', {
'x': vector.x,
'y': vector.y
});

setTimeout(function() {
move($e);
}, 50);

};

move($this);
});

};

$(function() {
$('#wrapper li').bounce({
'speed': 7
});
});

关于jQuery 弹跳变体(弹跳),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7873502/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com