Question

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

Answer 1

此插件不支持图片，因此您有两种选择：

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

小例子：

＆＃13;

$(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();
});

＆＃13;

.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;
}

＆＃13;

<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" />

＆＃13;

Answer 2

我找到了解决方案，将您的照片上传到https://imgur.com/，然后在上传完成后按鼠标右键单击图片，然后复制图片地址并将其放入您的代码中，如下所示：background-image：url（{{ 3}}）注意：复制链接后，检查链接是否以.jpg或.png结尾（如果以.jpg结尾）？1删除？1，以便链接以.jpg结尾

我不知道为什么jquery涟漪效应不支持普通照片，但这可以解决您的问题

JS Ripple对IMG的影响不是背景

2 个答案: