Question

我正在尝试为网站制作令人毛骨悚然的文字效果。在Stackoverflow上，它工作正常。目前很好。

但是问题不在我的项目文件夹中。如果您想检查一下，请点击以下链接下载：
Download

以下是HTML，CSS和jQuery代码：

$(document).ready(
  $('.textglitch').hover(function(){
    var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link');
    //console.log(eLchild);
    eLchild.attr('data-content', eLtext);
    eLchild.toggleClass('blur');
    $(this).toggleClass('active');
  }));

/*----TAGS----*/

*{
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', monospace;
}

body{
  background-color: black;
  background: repeat url("../img/noise.gif");
  outline:none;
  list-style:none;
  text-decoration:none;
}

/*----CLASS----*/

.main_div{
  position: fixed;
  top: 0px; left: 0px; right: 0px; bottom: 0px;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

/*----ANIMATE----*/

.textglitch {
  position: relative;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  z-index: 1;
  font-size: 5vw;
  font-weight: 700;
  margin: 50px 0;
}

.textglitch .textglitch-link {
  position: relative;
  display: inline-block;
}

.textglitch-link span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.blur {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-content);
  visibility: hidden;
}

.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
  visibility: visible;
}

.textglitch .textglitch-link:before {
  color: rgba(255, 0, 188, 0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}


.textglitch .textglitch-link:after {
  color: rgba(0,255,255,0.8);
  -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
  animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}

@keyframes textglitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
  20% {
    -webkit-transform: translate(-3px, 3px);
    transform: translate(-3px, 3px)
  }
  40% {
    -webkit-transform: translate(-3px, -3px);
    transform: translate(-3px, -3px)
  }
  60% {
    -webkit-transform: translate(3px, 3px);
    transform: translate(3px, 3px)
  }
  80% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px)
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0)
  }
}

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <link rel="stylesheet" href="../css/theme.css">
    <script type="text/javascript" src="../js/master.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

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


    <div class="main_div">
      <div class="textglitch">
        <a class="textglitch-link"><span>This is a Test</span></a>
      </div>
    </div>
  </body>
</html>

如果有人可以帮助我解决此问题，我会很高兴。

Answer 1

我查看了您的代码，它具有以下问题：

必须将主文件称为index.html，并且必须将其存储在root中-不能在子文件夹中。因此，您还需要更新<head>中的链接（即js/master.js而不是../js/master.js 和 {{1} }不是css/theme.css）
将您的js代码更改为：

../css/theme.css

确保在$(document).ready(function(){ //<=== i.e. missing the: " function(){ " $('.textglitch').hover( function(){ var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link'); console.log(eLchild); eLchild.attr('data-content', eLtext); eLchild.toggleClass('blur'); $(this).toggleClass('active'); }); });文件之前加载jQuery。

master.js

我正在处理的故障效果不起作用

1 个答案: