Question

我对jQuery不熟悉，但我一直在玩它。

一直在这个网站上工作，在头版上有一个马赛克设计，有很多图片。谁被安置在div中。

当你进入页面时，我想让这些div随机加载。

我已经尝试了

$(function() {
   $('.ih').hide().fadeIn('slow');
});

但这会加载整个页面。我想要div：

在您点击链接时将页面设置为动画并进入另一个页面

这可能吗？

Answer 1

我假设所有div都有一个.ih类，所以当你选择那个类时，所有这些都出现了。

尝试这样的事情：

var divs = $(".ih").get().sort(function(){ 
    return Math.round(Math.random());
}).slice(0, 10 );

$(divs).show();

我把（0,10）放在你想要的div中。

编辑：从Showing random divs using Jquery

修改的示例

Answer 2

是的，这是可能的。我怀疑会有一个插件可以完全满足您的需求，但只需要一点点工作，您就可以构建它。你有一个很好的开始将问题分成不连续的步骤：

第1步页面加载：最简单的方法是加载没有所有图像的页面 - 纯HTML。您将希望尽快完成此加载步骤。

第2步为中的图像添加动画效果：首先，构建图像列表及其去向。我不确定你的订单和位置，还是订单。无论哪种方式，它都会起作用。把它构建成一个很好的数组。

其次，您需要以顺序方式逐个动画这些动画：

var imgs = ...

function animateOne() {
  var img = imgs.pop();
  // preload the image
  (new Image).src = img.src;

  // set it up
  $(img.dom).css('opacity',0).attr('src',img.src);

  // animate it in
  $(img.dom).animate('fast', { opacity: 1 }, function() {
    if (imgs.length) {
      animateOne(); // recurse when we're done with the last one!
    }
  });
}

有更简洁的方式以批处理方式执行此操作，但在尝试不同的效果时这可能很有用。

第3步：要处理动画输出，您只需实现自己的jQuery点击处理程序：

$(...).click(function() {
  $(this).animate(...);
  return false;
});

显然，这是一个粗略的草图。

Jquery在页面加载时随机动画内容

2 个答案: