javascript - 在 mousemove 上交换多个图像

Question

我想做的是在 mousemove 上从左到右显示产品其他版本的图像。这是简单的 html 示例:

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

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

谁能帮我解决这个问题。我真的不擅长 javascript。

谢谢!

Answer 1

刚刚制作了一个Fiddle使用一些虚拟图像作为数据属性并遵循 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"));
});

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

供引用:http://api.jquery.com/data/

更新:根据进一步要求，同样的响应示例: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 类(不是必需的，但太习惯于使用类而不是仅仅应用于元素)并将控制台日志消息留在 Fiddle 中，这样更容易检查计算宽度和位置。
提供的示例中的另一个小调整是将数据属性的名称从 data-imageList 更改为 data-image-list ，也就是习惯了。原因是命名约定，每个连字符 data- 属性将被检索减去连字符和驼峰(连字符后的第一个字母)，因此 data-image-list 将被检索为 $.data("图片列表”)。此处的附加引用:W3C - The "data-"-attribute
如果使用的数据属性的名称是已经是驼峰式，那么它是可检索的小写:data-imageList="value1, value2, valu3" -> $。数据(“图像列表”)。虽然在 jQuery-api 中没有提到，描述例如这里:http://bugs.jquery.com/ticket/9066