为了账号安全,请及时绑定邮箱和手机立即绑定

使用jQuery更改翻转时的图像源

使用jQuery更改翻转时的图像源

神不在的星期二 2019-07-04 13:08:43
使用jQuery更改翻转时的图像源我有一些图片和他们的滚动图像。使用jQuery,当onmousemove/onmouseout事件发生时,我希望显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,如下所示:原始图像:Image.gif滚动图片:Imageover.gif我想插入并删除“完毕”在onmouseover和onmouseout事件中图像源的部分。我如何使用jQuery来完成它呢?
查看完整描述

3 回答

?
慕村9548890

TA贡献1884条经验 获得超4个赞

准备就绪:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });});

对于使用url图像源的用户:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });


查看完整回答
反对 回复 2019-07-04
?
慕容森

TA贡献1853条经验 获得超18个赞

我知道您在询问如何使用jQuery,但在JavaScript关闭使用CSS的浏览器中,您可以获得相同的效果:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);}#element:hover {
    background-image: url(/path/to/other_image.jpg);}

有一个更长的描述这里

然而,更好的做法是使用精灵:简单-css-图像翻转


查看完整回答
反对 回复 2019-07-04
?
繁星淼淼

TA贡献1775条经验 获得超11个赞

如果您有多个图像,并且需要一些通用的、不依赖于命名约定的东西。

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg"><img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })});


查看完整回答
反对 回复 2019-07-04
  • 3 回答
  • 0 关注
  • 417 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信