使用jQuery在滚动更改图像源
我有一些图像和翻转图像。 使用jQuery，我想在onmousemove / onmouseout事件发生时显示/隐藏翻转图像。 我所有的图像名称都遵循相同的模式，如下所示：
原始图像：
Image.gif翻转图像：
Imageover.gif
我想分别插入和删除onmouseover和onmouseout事件中的图像源的“over”部分。
我怎样才能使用jQuery？
准备就绪：
$(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); }); });
我知道你在问使用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图像滚动
如果您有多个图像，并且您需要一些不依赖于命名约定的泛型。
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') }) });
/* Teaser image swap function */ $('img.swap').hover(function () { this.src = 'http://img.dovov.comsignup_big_hover.png'; }, function () { this.src = 'http://img.dovov.comsignup_big.png'; });
一个通用的解决方案不仅限于“此图像”和“该图像”，可能只是将“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"]); }
$('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(){
等等。
它应该工作，我没有测试它:)
我希望有一个班轮，就像：
$("img.screenshot").attr("src", $(this).replace("foo", "bar"));
如果你正在寻找的解决方案是一个动画按钮，那么你可以做的最好的提高性能是精灵和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（或任何框架）是最好的。
玩的开心！
$('img').mouseover(function(){ var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif"); $(this).attr("src", newSrc); }); $('img').mouseout(function(){ var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif"); $(this).attr("src", newSrc); });
在找回解决方案的同时，我发现了一个类似的脚本，经过一些调整后，我为我工作。
它处理两个图像，几乎总是默认为“关闭”，鼠标离开图像（image-example_off.jpg），偶尔的“开”，在鼠标悬停的时候，所需的替代图像image-example_on.jpg）被显示。
<script type="text/javascript"> $(document).ready(function() { $("img", this).hover(swapImageIn, swapImageOut); function swapImageIn(e) { this.src = this.src.replace("_off", "_on"); } function swapImageOut (e) { this.src = this.src.replace("_on", "_off"); } }); </script>
<!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>
我做了类似下面的代码:)
它只有当你用_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();
改编自Richard Ayotte的代码 – 在ul / li列表中找到一个img（通过wrapper div class在这里找到），如下所示：
$('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') } );
