Question

我想做的是从左到右显示其他版本图像的鼠标。这是简单的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将再次出现。这将是默认图像。当用户仅在当前文章上从左向右移动鼠标时，应触发该功能。其他列表项不应受到鼠标移动的影响。也许，我应该创建一个唯一的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（不是必需的，但过去常常使用类而不是仅仅应用于元素）并将控制台日志消息留在小提琴中，这样更容易检查计算出的宽度和位置提供示例中的另一个小调整是将数据属性的名称从data-imageList更改为data-image-list，也就是刚刚使用它。 Reason是命名约定，每个被删除的data-属性将被检索减去连字符和camelcased（连字符后面的第一个字母），因此data-image-list将被检索为$ .data（＆＃34; imageList＆＃34）。此处的其他参考：W3C - The "data-"-attribute
如果已使用的数据属性的名称已基于驼峰，那么它可以检索小写：data-imageList="value1, value2, valu3" - ＆gt; $.data("imagelist")。虽然在jQuery-api中没有提到，但是描述例如：在这里：http://bugs.jquery.com/ticket/9066

Answer 2

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

＆＃13;

img

＆＃13;

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");
});

＆＃13;

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

＆＃13;

在mousemove上交换多个图像

2 个答案: