Question

我制作了一个图库。我有9个字段，每个字段都有一个图像（或者更好，有一部分图像）。总的来说，我有9个大图像，每个字段中每个大图像都有1/9。

当我“悬停”这九个字段中的一个时，我需要将其他字段更改为此图像的其余部分，并在所有字段中查看整个图像。

好的，我可以用CSS和一点点JS来制作，但我正在寻找任何javascript / jQuery效果，让我们说从右上角到左下角改变图像，任何在图像之间流畅地改变。

示例，包含3张图片：

HTML：

<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">
<img onmouseover="show_image('r');" rel="1" src="" class="r">
<img onmouseover="show_image('b');" rel="2" src="" class="b">
<img onmouseover="show_image('g');" rel="3" src="" class="g">

CSS：

img {float: left; width: 30%; height: 100px; margin: 0 9px 9px 0;}
img:nth-child(3n+3) {margin-right: 0;}

.g {background: #070;}
.b {background: #00f;}
.r {background: #f00;}

的JavaScript：

function show_image(id) {
$('img').removeClass().addClass(id).removeAttr('onmouseover');
}

（fiddle）

您是否知道如何在悬停其中一个图像时进行流畅的图像更改？在HTML中应该有所有27个小图像，没问题，我正在寻找切换效果。您可以发送示例链接，也许我只是不知道如何拨打我需要的电话： - ）

感谢。

Answer 1

好的，我现在明白你的问题了！

你的意思是，当你将鼠标悬停在图像上时，其余的图像会被剩下的部分取代，并且整个9个图像都匹配完成图像？

您需要设置这些功能！

尝试从元素中删除onmouseover函数，并尝试使用jQuery！

让我们开始这个例子！

示例图片代码：

<img src="some/source/to_file.png" alt="photo" class="image5" id="red" />

首先，您需要获取鼠标悬停事件发生的图像，如下所示：

$('img').mouseover(function () {
  var id = $(this).attr('id');
  var class = $(this).attr('class');
  if(id == 'red') {
    if(class == 'image5') {
    /* replace all the other images with red one 
     * here you will check the image's class too, which is the number
     * location where it is present at!
     */
    }
  }
}

在此之后，您还需要将图像移回原位！为此，请使用：

$('img').mouseleave(function () {
  // shift the src tag back as
  $('.image5').attr('src', 'its/src/to_file5.png');
  $('.image7').attr('src', 'its/src/to_file7.png');
  $('.image6').attr('src', 'its/src/to_file6.png');
}

等等。

是的，您需要将图片保存在浏览器中作为页面加载下载的文件，并在用户悬停结束后继续移动它们！

在你的小提琴中，你所做的只是添加一个类名，但你没有在mouseleave事件中删除或恢复它;没有mouseleave事件。

Answer 2

您可以使用jQuery UI switchClass() method，它允许您为整个班级制作动画。

以下是使用您的基础的工作代码示例：

function show_image(id) {
    $('img').each(function() {
        var className = this.className;
        if (className == id)
            className = '';
        $(this).removeClass().switchClass(className, id, 1000, 'linear').removeAttr('onmouseover');
    });
}

由于它删除了一个类并添加了其他类，如果删除和添加的类是相同的，它将无法工作，因此需要检查和重置。

至于“线性”，这只是我个人选择的宽松方法，从the full list选择你自己的。

Updated fiddle

流畅的图像变化

HTML：

CSS：

的JavaScript：

2 个答案: