jquery - 如何在 jquery 中随机化和模拟翻转？

Question

我有一个 JQuery 脚本，它作为一个简单的图像翻转，具有很好的淡入淡出效果。

这是当前脚本的测试版本 - http://fi-testing.co.uk/SO/rubix-cube.html

如您所见，有 9 个块，客户端希望翻转随机发生（没有悬停）以产生波纹/脉动效果。

使用 JQuery 或 php 将如何实现这一点？悬停是否有可能打破随机化并正常运行？

抱歉，如果有任何不清楚的地方。

谢谢你的帮助。

担

Answer 1

无需过多研究代码，您可以通过以下方式创建随机性Math.random()

因此，如果您有一个多维数据集数组，索引为 0 - 8，您可以使用

var randomNumber = parseInt( Math.random() * 9 );
var randomCube = cubes[randomNumber];

您可以使用setInterval它在每x毫秒重复一次

function randomlyChangeCubes() { ... }

...

setInterval( randomlyChangeCubes, 2000 );

您可以使用 jQuery手动trigger调用hover效果，但我想说将您拥有的代码提取hover到您调用 fromhover和 from的函数中会更具可读性randomlyChangeCubes。

话虽如此......完全随机地这样做可能不会让它看起来涟漪/脉动......

Answer 2

完成看起来很酷的随机性可能很棘手。该Math.random()方法从均匀分布中产生伪随机值（即，范围内的所有值具有相同的概率）并且看起来不太好。

我不是一个期望，我不能告诉你什么分布会产生更好的结果，但你可以尝试正态分布和泊松分布：

http://www.ciphersbyritter.com/JAVASCRP/BINOMPOI.HTM（代码见页面源代码）

Answer 3

你需要的东西：

setTimeout/setInterval = 在设定的时间随机数调用你的“效果”函数 = 使用它来随机调用所需的元素，例如 #box1、#box2 等。

我认为就是这样 - 应该相当简单。