我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
当前回答
<img src="img1.jpg" data-swap="img2.jpg"/>
img = {
init: function() {
$('img').on('mouseover', img.swap);
$('img').on('mouseover', img.swap);
},
swap: function() {
var tmp = $(this).data('swap');
$(this).attr('data-swap', $(this).attr('src'));
$(this).attr('str', tmp);
}
}
img.init();
其他回答
<img src="img1.jpg" data-swap="img2.jpg"/>
img = {
init: function() {
$('img').on('mouseover', img.swap);
$('img').on('mouseover', img.swap);
},
swap: function() {
var tmp = $(this).data('swap');
$(this).attr('data-swap', $(this).attr('src'));
$(this).attr('str', tmp);
}
}
img.init();
如果您有多个图像,并且需要一些不依赖于命名约定的通用图像。
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')
})
});
$('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(){
等等。
它应该工作,我没有测试它:)
/* Teaser image swap function */
$('img.swap').hover(function () {
this.src = '/images/signup_big_hover.png';
}, function () {
this.src = '/images/signup_big.png';
});
改编自Richard Ayotte的代码- 要在ul/li列表中定位img(通过包装器div类在这里找到),如下所示:
$('div.navlist li').bind('mouseenter mouseleave', function() {
$(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'),
'data-alt-src':$(this).find('img').attr('src') }
);