Question

所以我在这里有这个页面： http://www.eminentmedia.com/development/powercity/

正如您可以看到当鼠标悬停在图像上时，div会上下滑动以显示更多信息。不幸的是，我有2个问题，我无法弄清楚，我已经搜索过，但没有通过谷歌找到正确的答案，并希望有人能指出我的教程方向。

第一个问题是，当您将鼠标悬停在图像上时，它会变为彩色（加载新图像），但是第一次加载图像时会有短暂的延迟，因此用户会看到白色。我是否必须预先加载图像或其他内容才能解决问题？

我的第二个问题是，当你将鼠标移到“额外内容区域”上时，它会发疯并开始上下跳动。我只是不知道会导致什么，但我希望你们中的一个会这样做！

如果您想查看来源，我的所有代码都直接在该页面的来源中。

提前感谢您的帮助！

Answer 1

是的，您必须预先加载图像。谢天谢地，这很简单：

var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
    $('<img/>').attr({src: images_to_preload[i]});
});

你必须要理解的另一件事是，当你使用jQuery时，你必须真正拥抱它，否则你最终会以错误的方式做事。例如，一旦你发现自己在不同的地方重复同一段代码，你可能会做错事。现在你到处都有这个：

<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">

从头脑中解脱出来。现在。永远。总是。内联javascript事件不正确，尤其是当您拥有像jQuery这样的库时。做你想做的事的正确方法是：

$(function() {
    $('div.box').hover(function() {
        $(this).addClass('active');
        $(this).find('div.slideup').slideDown('slow');
    }, function() {
        $(this).removeClass('active');
        $(this).find('div.slideup').slideUp('slow');
    });
});

（你必须给所有#industrial，＃sqainable等元素一个'box'以便上面的工作）

这些更改也可以解决您的滑动问题。

Answer 2

我可以看到你的图像（正在改变的图像）是在div的背景中设置的。这是一个jquery脚本，可以预加载css文件中的每个图像。我过去遇到过同样的问题，这个脚本解决了这个问题。它也很容易使用：

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

我会看看你的另一个问题......

Answer 3

1）您应该使用jquery事件来驱动您的鼠标悬停。给每个div一个类，以指示它是一个类别容器，并使用hover function生成您所追求的鼠标悬停/鼠标移动操作。

<强> HTML

<div id="industrial" class="category"></div>

<强>的Javascript

$(".category").hover(
  function () {
    $(this).find('.container').show();
  }, 
  function () {
    $(this).find('.container').hide();
  }
);

我将代码简化为只显示和隐藏，您需要使用其他代码向上滑动并向下滑动。

2）是的，您需要预先加载图片。另一种选择是“精灵”图像。这将涉及将每个图像的黑色和白色以及颜色版本组合成单个图像。然后将其设置为div的背景图像，并使用CSS调整背景位置偏移。基本上，当您翻转时，立即从黑白滑动到彩色图像。这种技术保证两个图像都满载。

当鼠标进入子节点时如何保持div焦点

3 个答案: