0

我必须建立一个网站，在标题或网站的第一页中我需要使用涟漪效应

我仍然不明白我做错了什么。

下面是代码：

这是CSS：

#header {
  top: 15px;
  height: 70px;
  z-index: 991;
  transition: all 0.5s ease-in-out;
  padding: 10px 0;

}

#header.header-scrolled {
  top: 0;
  background: rgba(26, 24, 22, 0.85);
}

#header .logo h1 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1;
  letter-spacing: 3px;
}

#header .logo h1 a, #header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}



@media (max-width: 992px) {
  #header {
    top: 0;
    background: rgba(26, 24, 22, 0.85);
  }
}

在我添加的头上

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在代码的最后我添加了：

<script src="assets/vendor/jquery/jquery.min.js"></script>

这就是我试图在 js 上插入的方式：

    jQuery(document).ready(function(){
      "use strict"

      $('.header').ripples({
        dropRadius: 25,
        perturbance: 0.6,
      });

    });

!(function($) {



 // Smooth scroll for the navigation menu and links with .scrollto classes
  $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      if (target.length) {
        e.preventDefault();

    var scrollto = target.offset().top;
    var scrolled = 51;


      //  ........

其余不需要的代码。

4

1 回答 1

0
  1. 如果有 ID 则使用 #header，如果有类则使用 .header
  2. 加载你需要的库

$(function() {
  $('#header').ripples({
    dropRadius: 25,
    perturbance: 0.6,
  });
});
#header {
  top: 15px;
  height: 70px;
  z-index: 991;
  transition: all 0.5s ease-in-out;
  padding: 10px 0;
}

#header.header-scrolled {
  top: 0;
  background: rgba(26, 24, 22, 0.85);
}

#header .logo h1 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1;
  letter-spacing: 3px;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 992px) {
  #header {
    top: 0;
    background: rgba(26, 24, 22, 0.85);
  }
}
<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>
<header id="header"><div class="logo"><h1>Click to see <a href="https://www.npmjs.com/package/jquery.ripples">ripples</a></h1></div></header>

于 2020-05-10T06:56:42.467 回答