在 mousemove 上交换多个图像答案

【问题标题】：Swap multiple images on mousemove在 mousemove 上交换多个图像
【发布时间】：2014-09-17 17:19:32
【问题描述】：

我想做的是从左到右在 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 将从 data-imageList 更改。当用户将鼠标从文章中移出时，main-image.jpg 将再次出现。这将是默认图像。当用户只在当前文章上从左向右移动鼠标时，应该触发该功能。其他列表项不应受到 mousemove 的影响。也许，我应该创建一个唯一的 id 或使用“每个函数”来做到这一点。反正我也解决不了这个问题……

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

谢谢！

【问题讨论】：

这是我真正想要的示例网站（在产品图片上翻转）bit.ly/1DkhVoH
只需在此处添加，以避免我的答案下方有太多 cmets - 您可以将 $images = $("figure").data("imageList") 更改为 $("figure").data ("imagelist") 以防您的实时站点上已经有太多名为 data-imageList 的数据属性；使用 $.data() 检索将小写属性的名称。虽然它不在 jquery-api 中，但在此处提到：bugs.jquery.com/ticket/9066（简而言之：这是一个无法检索驼峰式属性名称但已修复的错误）。已经使用您的原始属性名称在小提琴上进行了测试，小写即可。
您能否在您的问题中粘贴带有数据属性和 jquery-data 查询的图形，或者提供指向相关站点的链接？刚刚收到自动通知以避免过多的 cmets 和聊天建议，但也许这只是一个小问题，因为小提琴正在工作，再用两句话就可以解决。
该页面的 html 已损坏，源代码在 placehold.it/230x383&text=IMG1" data-original="placehold.it/230x383&text=IMG1" width= 处停止在第 238 行。现在它停在第 285 行（缺少关闭标签）。至少比以前多几行.. :)
那个 url 没问题，但是哪里没有类 imageHolder，所以脚本不起作用。这里也收到了通知，将其移至聊天中，因为它的 cmets 太多。这样可以吗？如果修好了，估计只需要几分钟就能搞定。

标签： javascript jquery css html swap

【解决方案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("imageList") 检索。此处的其他参考：W3C - The "data-"-attribute
如果使用的数据属性的名称是已经是驼峰式，那么它是可检索的小写：data-imageList="value1, value2, valu3" -> $.data("imagelist")。虽然在 jQuery-api 中没有提到，但描述例如这里：http://bugs.jquery.com/ticket/9066

【讨论】：

这很酷，但设计是响应式的。因此图像宽度因分辨率而异。你能给我看一张响应式图片吗？
@MegAnn 很高兴你喜欢它，因为我正要增加图像大小（我只是注意到在 mousemove 上更改 img 只有在鼠标移动非常缓慢的情况下才可见）。重新响应 - 应该不是太大的问题，因为可以获得实际的 img-width / img-container 的宽度并设置相应的更改 img 的步骤。将在几分钟内添加第二个小提琴。
@MegAnn 刚刚将第二个小提琴的答案更新为响应式示例。
这太棒了！不过我有一个小问题。当我将鼠标悬停在我的现场设计上时，它不起作用。这是我得到的错误消息； “Uncaught TypeError: Cannot read property 'split' of undefined” 消息的详细信息是：（匿名函数）（索引）：278m.event.dispatch jquery.js:3r.handle
@MegAnn 也许这仅与您的实时站点以及我刚刚在 1 分钟前的次要回答中提到的数据属性的重命名有关。我重命名了你的数据属性，所以如果你只是应用我的例子，你就不会得到它的价值。这可能吗..？

【解决方案2】：

您可以使用div 并在其中放置img 控件。现在使用onmouseover 和e.PageX 找到div 的change in width 和width，然后使用if-else 更改src 的img 属性。最后使用onmouseleave将img的src改为默认。

var prevX = 0;
$('div').mousemove(function(e) {
 var direc = (prevX >= e.pageX ? "left" : "right");
    if(direc==="right"){
        if(e.pageX>100){
        $("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+2");
        }
        else
        {
        $("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+3");
        }
    }
    prevX = e.pageX;
});

$( 'div' ).mouseleave(function() {
$("#img").attr("src", "http://dummyimage.com/200x300/000/fff.png&text=Image+1");
});

div
{
    height:300px;
    width:200px;
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
    <img id="img" src="http://dummyimage.com/200x300/000/fff.png&text=Image+1">
</div>

【讨论】：