jQuery 涟漪效应未显示-解网

问：

使用 Jquery Ripple 效果库，我尝试将给定的效果应用为 CSS 类元素。我正在使用WordPress开发环境，并且添加了函数运行（functions.php），但是当我创建元素时，我的效果没有显示，例如：

<div class="ripples-effect">
<!-- Your content here -->

我已经检查了控制台，没有jquery错误等错误。

function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');

    // Enqueue jQuery Ripples JS
    wp_enqueue_script('jquery-ripples', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js', array('jquery'), '0.5.3', true);
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".ripples-effect").ripples({
                resolution: 512,
    dropRadius: 20,
  perturbance: 5,
            });
        });
    </script>
    <?php
}

add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

jquery css jquery插件

根据文档：在元素上使用此插件的最快方法是确保该元素具有背景图像集。以及：重要提示：此插件需要 WebGL 扩展OES_texture_float（并且OES_texture_float_linear以获得更好的效果），并且仅适用于同源图像（有关使用跨源请求图像的更多信息，请参阅此链接）。因此，请确保您有 div 的背景图像

0赞 Death-is-the-real-truth 11/7/2023

你的 div 是否包含任何背景图像？

答：

1赞 Minal Chauhan 11/7/2023 #1

这在下面的示例中工作正常。如果将光标移到 div 上，您可以看到涟漪效果并向 div 添加背景图像。

jQuery('.ripples-effect').ripples({
  resolution: 512,
  dropRadius: 20, //px
  perturbance: 0.04,
});

.ripples-effect {
   background: url(https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg);
   background-size: cover;
   background-position: 50% 0;
   height: 100vh;
   color: #fff;
   text-align: center;
   padding: 100px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>

<div class="ripples-effect">
   Your content here
</div>

jQuery 涟漪效应未显示

jQuery Ripples Effect Not Displaying

评论

评论