在mousemove上交换多个图像 [英] Swap multiple images on mousemove

问题描述

我想做的是从左到右显示其他版本图像的鼠标。这是简单的html示例：

What i would like to do is to show the products other versions of images on mousemove from left to right. Here's the simple html example:

    <article>
      <figure data-imageList="image2.jpg,image3.jpg,image4.jpg">
        <img data-src="main-image.jpg" src="main-image.jpg">
      </figure>
    </article>

正如您在html中看到的，图像src将从data-imageList更改。当用户从文章中鼠标拖出时，main-image.jpg将再次出现。这将是默认图像。当用户仅在当前文章上从左向右移动鼠标时，应触发该功能。其他列表项不应受到鼠标移动的影响。也许，我应该创建一个唯一的ID或使用每个功能来做到这一点。无论如何我无法解决这个问题...

As you can see at html, the images src will be change from the data-imageList. When user mouseout from the article, the main-image.jpg will appear again. This will the default image. The function should be trigger when user only move his mouse from left to right on the current article. The other list items shouldn't be affected from the mousemove. Maybe, i should create a unique id or use the "each function" to do that. I couldn't solve that problem either anyway...

有人可以帮助我解决这个问题。我在javascript上非常糟糕。

Could someone help me to solve that problem. I am really bad at javascript.

谢谢！

推荐答案

刚刚制作了一个小提琴，其中一些虚拟图像作为数据属性并跟随jQuery：

Just made a Fiddle with some dummy-images as data-attribute and following jQuery:

    $("img").mousemove(function (event) {
    var xPos = event.pageX;
    $images = $("figure").data("imageList");
    var array = $images.split(',');
    if (xPos > 40) {
        $("img").attr("src", array[0]);
    }
    if (xPos > 65) {
        $("img").attr("src", array[1]);
    }
    if (xPos > 85) {
        $("img").attr("src", array[2]);
    }

});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});

仅用于演示小图像。可以在交换图像时根据实际图像大小正确计算，但是对于演示只是对值进行了硬编码。

For demonstration just small images. Could be calculated properly according to the actual image size when the images should be swapped, but for demo just hardcoded the values.

供参考： http：//api.jquery。 com / data /

更新：进一步请求响应的相同示例：更改响应式图像

Update: As further requested the same example for responsive: Change responsive image

$(".imageHolder").mousemove(function (event) {
    var xPos = event.pageX,
        imgPos = $(".imageHolder").offset().left,
        imgWidth = $(".imageHolder").width();
    var change1 = imgPos,
        change2 = imgPos + imgWidth / 3,
        change3 = imgPos + 2 * imgWidth / 3;
    $images = $("figure").data("imageList");

    var array = $images.split(',');
    if (xPos > change1) {
        $("img").attr("src", array[0]);
    }
    if (xPos > change2) {
        $("img").attr("src", array[1]);
    }
    if (xPos > change3) {
        $("img").attr("src", array[2]);
    }


});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});  

CSS：

figure {
    width:100%;
    max-width:200px;
}
img {
    position:relative;
    width:100%;
}

我还添加了班级 imageHolder 到图像（没有必要但过于习惯于使用类而不是仅仅应用于元素）并将控制台日志消息留在小提琴中，因此更容易检查计算出的宽度和位置。

另一个提供示例中的次要调整是将数据属性的名称从 data-imageList 更改为 data-image-list ，也只是习惯了它。 Reason是命名约定，每个被删除的 data - 属性将被检索减去连字符和camelcased（连字符后面的第一个字母），因此将检索data-image-list as $ .data（imageList）。此处的其他参考： W3C - 数据 - - 属性

如果所使用的数据属性的名称已经是camelCased，那么它可以检索小写： data-imageList =value1，value2，valu3 - > $。data（imagelist）。虽然在jQuery-api中没有提到，但是描述例如：这里： http://bugs.jquery.com/ticket/9066

I also added class imageHolder to the image (not necessary but too used to work with classes instead of just applying to elements) and left the console log messages in the Fiddle so it's easier to check the calculated width and positions.
Another minor adjustment in provided example is to change the name of the data-attribute from data-imageList to data-image-list, also of just being used to it. Reason is the naming convention that every hyphened data- attribute will be retrieved minus the hyphen and camelcased (the first letter after the hyphen), so data-image-list will be retrieved as $.data("imageList"). Additional reference for this here: W3C - The "data-"-attribute
If the name of the used data-attribute is already camelCased, then it's retrievable lowercased: data-imageList="value1, value2, valu3" -> $.data("imagelist"). Though not mentioned in the jQuery-api, description e.g. here: http://bugs.jquery.com/ticket/9066

这篇关于在mousemove上交换多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！