JS涟漪效应IMG不背景

Question

我想改变jquery.ripples（https://github.com/sirxemic/jquery.ripples/）使用涟漪效应的图像本身，而不是背景。我尝试了很多东西都无济于事。任何指导或其他方法的建议将不胜感激！

Answer 1

这个插件不支持图像，所以你有两个选择：

1. 等待作者添加该功能（或其他人，谁叉这个项目），或
2. 建立一个快捷方式 - 对于要使用此效果的每个图像，您需要在顶部创建div（位置：绝对，z-index：10;宽度和高度等于图像的尺寸）并复制图像的src并将其设置为div的背景。那么你可以像例子一样使用这个效果。

小例如：

$(window).load(function() { 
 
    $('img.ripples-image').each(function() { 
 
    $image = $(this); 
 
    $image.wrap('<div class="ripples-wrapper"></div>').after('<div class="ripples-img" style="background-image:url(\''+ $image.attr('src') +'\')"></div>'); 
 
    }); 
 
    
 
    // Set effect 
 
    $('.ripples-img').ripples(); 
 
});

.ripples-wrapper{ 
 
    position:relative; 
 
    display: inline-block; 
 
} 
 
.ripples-wrapper img{ 
 
    display:block; 
 
    visibility:hidden; /* Hidden, but keep place */ 
 
} 
 
.ripples-img{ 
 
    position:absolute; 
 
    display:inline-block; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:10; 
 
    top:0; 
 
    left:0; 
 
    background-repeat:no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.4.2/jquery.ripples.js"></script> 
 

 
<img class="ripples-image" src="http://bloximages.newyork1.vip.townnews.com/wisconsin.golf/content/tncms/assets/v3/editorial/1/23/1233a6ba-d0d8-11e5-9a3c-fbcece8553f7/56bcafd946c28.image.jpg?resize=400%2C400" alt="StackOverflow logo" />