我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
当前回答
我知道你在问使用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);
}
这里有更长的描述
然而,更好的方法是使用精灵:simple-css-image-rollover
其他回答
我做了如下代码:)
只有当你有一个名为_hover的第二个文件时,它才有效,例如,facebook.png和facebook_hover.png
$('#social').find('a').hover(function() {
var target = $(this).find('img').attr('src');
//console.log(target);
var newTarg = target.replace('.png', '_hover.png');
$(this).find('img').attr("src", newTarg);
}, function() {
var target = $(this).find('img').attr('src');
var newTarg = target.replace('_hover.png', '.png');
$(this).find('img').attr("src", newTarg);
});
<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();
一个通用的解决方案,不限制你只有“这个图像”和“那个图像”可能是添加“onmouseover”和“onmouseout”标签到HTML代码本身。
HTML
<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />
JavaScript
function swap(newImg){
this.src = newImg;
}
这取决于您的设置,也许这样做会更好(并且需要更少的HTML修改)。
HTML
<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />
JavaScript / jQuery
// Declare Arrays
imgList = new Array();
imgList["ref1"] = new Array();
imgList["ref2"] = new Array();
imgList["ref3"] = new Array();
//Set values for each mouse state
imgList["ref1"]["out"] = "img1.jpg";
imgList["ref1"]["over"] = "img2.jpg";
imgList["ref2"]["out"] = "img3.jpg";
imgList["ref2"]["over"] = "img4.jpg";
imgList["ref3"]["out"] = "img5.jpg";
imgList["ref3"]["over"] = "img6.jpg";
//Add the swapping functions
$("img").mouseover(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
}
$("img").mouseout(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
}
如果您有多个图像,并且需要一些不依赖于命名约定的通用图像。
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')
})
});
改编自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') }
);