在mousemove上翻转图像

flipping through images on mousemove

本文关键字：图像 翻转 mousemove      更新时间：2023-09-26

我正试图通过更改与鼠标位置相关的图像的z索引属性，使用mousemove函数来翻转图像堆栈。我遇到控制台错误，不知道是什么原因造成的。我在代码中写了一些注释，让它更清晰。我只是从js开始，它可能是一个非常简单的错误。

    var $images = $('#images'),  // caching elements
    $img = $('img', $images),
    l = $img.length;  
$('#images').mousemove(function(e){
    var xPos = e.pageX - this.offsetLeft;
    w = $(this).width() / l;
    xPos = Math.floor(xpos / w);  //setting xPos variable equal to the mouse X position.
    $img.css("z-index","0"); //assigning images z-index value to 0
    if (xPos >= 0 && xPos < l) {
        $img[xPos].css("z-index","1"); //changing 'current' (image relevant to xPos) z-index value to 1 !!!console error 'undefined'!!!
    }
});

FIDDLE

问题可以追溯到以下行：

$img[xPos].css("z-index","1");

这是因为您将$img[xPos]视为jQuery对象，但它实际上返回了HTML节点。你应该去：

$img.eq(xPos).css("z-index","1");

修复：）在此处检查修复的小提琴：http://jsfiddle.net/teddyrised/0qubpa7a/4/

p/s：为了安全起见，我还建议使用var语句声明变量。此外，请避免覆盖xPos的值，而是分配一个新变量：）

相关文章：