0

我有一个问题需要帮助。

我正在尝试使用 jQuery 创建鼠标悬停动画，以便当用户将鼠标悬停在图像上时，它会显示图像的突出显示版本。我知道我可以用 CSS 做到这一点，但问题是需要管理内容。所以我想编写一个与图像文件名的一部分匹配的函数，并对文件名的其余部分使用通配符。

这是 HTML：除非用户将鼠标悬停在图像上，否则该图像将始终显示。

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/bgr_img.jpg' ?>" alt="First Image" />

当用户将鼠标悬停在图像上时，我想更改 src：

<img class="imgPath" src="<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ?>" alt="First Image" />

在 mouseout 上，我希望 src 返回到之前的状态“bgr_image.jpg”

这是我目前使用的 jQuery：

$(function() {
    $(".imgPath")
        .mouseover(function() { 
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg");
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg");
            $(this).attr("src", src);
        });
});

如果我现在将鼠标悬停在图像上，它会将 src 更改为“null”。我尝试使用不包含域的路径名，但它返回相同的值。

帮助将不胜感激。

4

3 回答 3

1

为什么你匹配你的 src 或替换它？只需更改它：

$(function() { 
    $(".imgPath").hover(
        function() { $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg"); },
        function() { $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg"); }
    ); 
});

编辑：

match() 返回匹配的数组：使用 [0] 访问您的 src

$(function() { 
    $(".imgPath") 
        .mouseover(function() {  
            var src = $(this).attr("src").match("http://domain.com/path/to/img/hvr_image.jpg"); 
            $(this).attr("src", src[0]); 
        }) 
        .mouseout(function() { 
            var src = $(this).attr("src").replace("http://domain.com/path/to/img/hvr_image.jpg", "http://domain.com/path/to/img/bgr_image.jpg"); 
            $(this).attr("src", src); 
        }); 
});

编辑2：

<img class="imgPath" onmouseover="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="changeImgSrc(this, '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />

<script>
    function changeImgSrc(img, imgsrc) {
        $(img).attr('src', imgsrc);
    }
</script>

或者：

<img class="imgPath" onmouseover="this.src = '<?php echo PATH_SITE. 'uploads/folder/hvr_image.jpg' ) ?>'" onmouseout="this.src = '<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ) ?>'" src="<?php echo PATH_SITE. 'uploads/folder/bgr_image.jpg' ?>" alt="FirstImage" />
于 2012-04-19T08:24:16.347 回答
0

“match”函数返回一个布尔值，而不是一个字符串（在 mouseover 函数中）

于 2012-04-19T08:23:07.237 回答
0

此任务无需使用match()和replace()函数

执行以下操作。

$(function() {
    $(".imgPath")
        .mouseover(function() { 

            $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");

        })
        .mouseout(function() {
            $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");

        });
});

编辑：

假设您对多个图像有这种情况：

<div class="imgPath"><img src="1.jpg" /> </div>
<div class="imgPath"><img src="2.jpg"  /></div>
<div class="imgPath"><img src="3.jpg" /> </div>
<div class="imgPath"><img src="4.jpg"  /></div>

所以我们可以用下面的代码来管理它：

$('.imgPath img').hover(
    function(){
        $('.imgPath img').each(
            function(){
                $(this).attr("src", "http://domain.com/path/to/img/bgr_image.jpg");
            });
    },
    function(){
        $('.imgPath img').each(
            function(){
              $(this).attr("src", "http://domain.com/path/to/img/hvr_image.jpg");
            });
    }

);

我想这会对你有更多帮助。

谢谢。

于 2012-04-19T08:32:07.700 回答