我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
我有一些图像和它们的翻转图像。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,像这样:
原始图片:Image.gif 翻转图像:Imageover.gif
我想分别在onmouseover和onmouseout事件中插入和删除图像源的“over”部分。
如何使用jQuery来实现它?
当前回答
如果您有多个图像,并且需要一些不依赖于命名约定的通用图像。
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')
})
});
其他回答
如果你正在寻找的解决方案是一个动画按钮,那么你能做的最好的提高性能的方法是精灵和CSS的结合。精灵是一个巨大的图像,它包含了站点的所有图像(标题、标志、按钮和所有装饰)。您拥有的每个图像都使用一个HTTP请求,HTTP请求越多,加载所需的时间就越多。
.buttonClass {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
width: 25px;
height: 25px;
background: url(Sprite.gif) -40px -525px;
}
0px 0px坐标将位于精灵的左上角。
但如果您使用Ajax或类似的技术开发相册,那么JavaScript(或任何框架)是最好的。
玩得开心!
/* Teaser image swap function */
$('img.swap').hover(function () {
this.src = '/images/signup_big_hover.png';
}, function () {
this.src = '/images/signup_big.png';
});
我希望有一个über这样的一行:
$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
#box{
width: 68px;
height: 27px;
background: url(images/home1.gif);
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover( function(){
$('#box').css('background', 'url(images/home2.gif)');
});
$('#box').mouseout( function(){
$('#box').css('background', 'url(images/home1.gif)');
});
});
</script>
</head>
<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>
我知道你在问使用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