使用jQuery更改翻轉時的圖像源我有一些圖片和他們的滾動圖像。使用jQuery，當onmousemove/onmouseout事件發生時，我希望顯示/隱藏滾動圖像。我所有的圖像名稱都遵循相同的模式，如下所示：原始圖像：Image.gif滾動圖片：Imageover.gif我想插入并刪除“完畢”在onmouseover和onmouseout事件中圖像源的部分。我如何使用jQuery來完成它呢？
3 回答
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
$(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);
});});$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src");
var regex = /_normal.svg/gi;
src = this.src.replace(regex,'_rollover.svg');
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src");
var regex = /_rollover.svg/gi;
src = this.src.replace(regex,'_normal.svg');
$(this).attr("src", src);
});
});
慕容森
TA貢獻1853條經驗 獲得超18個贊
#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);}
繁星淼淼
TA貢獻1775條經驗 獲得超11個贊
<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">
$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
src: $(this).attr('data-other-src')
, 'data-other-src': $(this).attr('src')
})});- 3 回答
- 0 關注
- 491 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消