问答中心分类: HTML使用jQuery更改滚动时的图像源
0
匿名用户 提问 40分钟 前

我有一些图片和它们的滚动图片。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,如下所示:

原始图像:Image.gif
翻转图像:Imageover.gif

我想插入和删除“结束”onmouseover和onmouseaut事件中的图像源部分。
我如何使用jQuery实现它?

12 Answers
0
Tyson 回答 40分钟 前

我知道你在问关于使用jQuery的问题,但在使用CSS关闭JavaScript的浏览器中,你可以达到同样的效果:

#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图像滚动

Ionuț Staicu 回复 40分钟 前

是的,但在图像元素上做到这一点有点难:)除此之外,CSS意味着将内容与表示分离。如果你这样做,你就加入了这些事情;)对于一个大的站点,你不能有这个,对吗?

Jarrod Dixon 回复 40分钟 前

我同意你对css的看法,但问题的作者似乎想要一个同时适用于多个图像的通用解决方案。

Angel.King.47 回复 40分钟 前

这个解决方案是最可取的选择,除非你正在做一些效果。我也在想同样的事情

kheraud 回复 40分钟 前

这是最好的解决方案。为了避免等待新映像(网络请求),请使用单个映像。jpg和播放背景位置,以显示/隐藏好的一个。

DACrosby 回复 40分钟 前

@kheraud移动单个图像是一个很好的解决方案,但它是否最佳取决于图像大小。例如,在速度较慢的互联网上,在一个巨大的文件中下载两个1920像素宽的图像将花费不可接受的时间。对于图标和小图像,尽管效果很好。

0
Richard Ayotte 回答 40分钟 前

如果您有多个图像,并且需要不依赖于命名约定的通用图像。
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') 
    })
});
Mischa 回复 40分钟 前

这是给我的。只要记住把javascript放在一个函数中执行它,即当DOM就绪时“$(function(){};”

Mike 回复 40分钟 前

实际上,当页面仍在加载时它会触发,当鼠标光标实际位于选择器上时,它会替换url,因此效果会反转

0
Jonas Lejon 回答 40分钟 前
/* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });
Tyson 回复 40分钟 前

请记住,这样做意味着当浏览器获取图像时,用户将在第一次悬停时看到暂停。

Jarrod Dixon 回复 40分钟 前

+1 Doh,忘记了悬停事件助手!关于在图像中添加类的建议很好——这确实是一个最佳实践:)

trante 回复 40分钟 前

这是更好的解决方案,因为它缓存了旧的图像源。

trante 回复 40分钟 前

负面的部分是,如果图片位于页面底部,并且有10-20张图片,那么布局就会变得奇怪。

Kristopher Rout 回复 40分钟 前

我意识到上述函数将对DOM中当前编码的所有图像执行。提供进一步的上下文将使其关注特定img元素的影响。

0
Ionuț Staicu 回答 40分钟 前
$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

您可能需要更改第一行的图像类别。如果需要更多图像类(或不同的路径),可以使用

$('img.over, #container img, img.anotherOver').each(function(){

等等
它应该可以工作,我没有测试:)

Jarrod Dixon 回复 40分钟 前

+1 Doh,忘记了悬停事件助手!关于在图像中添加类的建议很好——这确实是一个最佳实践:)

trante 回复 40分钟 前

这是更好的解决方案,因为它缓存了旧的图像源。

trante 回复 40分钟 前

负面的部分是,如果图片位于页面底部,并且有10-20张图片,那么布局就会变得奇怪。

0
chovy 回答 40分钟 前

我希望有一条像这样的航线:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));