个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在尝试为网站制作故障文本效果。在 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>如果有人能帮我解决这个问题，我会很高兴。
最佳答案
我查看了您的代码，它存在以下问题:
主文件必须调用index.html并且它必须存储在根目录中 - 它不能在子文件夹中。因此，您还需要更新 <head> 中的链接。 (即 js/master.js 不是 ../js/master.js and css/theme.css 不是 ../css/theme.css )
将您的 js 代码更改为:
$(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');
});
});
master.js 之前加载 jQuery文件。 <body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/master.js"></script>
<div class="main_div">
关于javascript - 我正在处理的 Glitch Effect 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57046376/
26
4
0
Closed. This question needs to be more focused。它当前不接受答案。
我正在尝试使用 JavaFX 证明一个可扩展的小部件，它与 TitledPane 的不同之处在于标签周围的边框随着小部件的扩展而增长。我找到了一种方法。 但是我有一个奇怪的故障，在展开/折叠一两次后出
我在 IE9、:hover 和 CSS 背景属性中出现了一些非常奇怪的行为。 这几乎就像悬停和非悬停属性在不应该的时候交换了(换句话说，悬停属性变成了非悬停属性)。我只是用背景颜色和 SVG 渐变进行
我在使用 Firefox 的网站上遇到了一个“小”问题。在 Google Chrome 和 Safari 上，它工作得很好。 它应该是什么(Chrome 和 Safari): Firefox 上的问题
我一直在 glitch.com 中摆弄 HTML 代码，我想知道如何让某人输入一个输入并保存该输入，以便他或其他人可以看到它，有点像消息，有没有办法使用 JavaScript 的 console.lo
按住单个箭头键时，该功能可以正常工作。 但是，当我按住第二个箭头键并释放第二个键时，就会出现问题，不再检测到第一个按住的键。 我的函数的简化版本如下: document.body.onkeyup =
我在移动网站上使用 jQuery Mobile (v1.4.5.) 时遇到固定页脚的一些故障。 当有很多文本(需要滚动)时，没有问题。当文本很少(不需要滚动)时，没有问题。 当文本刚好需要稍微滚动一下
我使用 Glitch 编写一个 WebVR 项目。如果我直接在views/index.html中设置脚本，效果很好。但是如果我将脚本保存在 js/opencloserawer.js 中并将其导入到 i
我是 bootstrap 的新手，正在学习。我讨厌演示示例，它破坏了语义以使其看起来不错。无论如何... 我在示例网站上工作，theavcorp.com ，并在学习 Bootstrap 时尽量不要“破
我试图在将鼠标悬停在某个元素上时更改该元素的宽度。它似乎可以工作，但只要我将鼠标悬停在元素上，它就会一直过渡，从而导致类似故障的循环。我怎样才能使转换只发生一次？ 谢谢。 html:
这个问题已经有答案了: Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API? (36
我试图在 C 中创建一个矩阵来求解拉普拉斯算子 然而，这是错误的。我已经在矩阵的初始化阶段找到了问题。程序每次运行时，都会在一个元素中放置一个看似随机的值。这个数字每次都会改变，表明代码不稳定，如果矩
我正在尝试为网站制作故障文本效果。在 Stackoverflow 上，它工作得很好。目前很好。 但问题不在我的元素文件夹中。如果您想查看它，请点击此处下载它: Download 这是 HTML、CSS
我网站的用户在执行任何 jQuery 代码之前在每个页面上看到了一个半秒故障。此代码操纵页面，因此您可以明显地看到元素在一大块中移动，使用户体验感到笨拙。我希望页面在 JavaScript 运行之前完
我在使用 Salat 时遇到了一个奇怪的问题，尤其是在我运行 Play 网络应用程序时会发生这种情况。 这是堆栈跟踪: Caused by: java.util.concurrent.Executio
我有一个子菜单，当悬停在导航元素上时，它会变为可见。当该元素不再悬停时，子菜单将变为不可见并向上移动。我已经在下面附上了我的部分代码。我面临的问题是，由于子菜单就在导航元素的正下方，向上移动会在转换期
如何在 Glitch.com 上创建和使用 Python 3.7？ 我创建了一个项目。默认的 Python 版本是旧的。 我使用这些文件在 Glitch 上运行 Python: 主文件 import
我正在使用 BottomNavigationView 并将 ListView 添加到我的布局中。添加这个ListView后，之前的屏幕不会消失，并且这个新屏幕会覆盖之前的屏幕。有人知道为什么会发生这种
一般的 IE8 和 Javascript:导致 IE8 性能故障的常见问题是什么？有人知道在为 IE8 开发脚本时要避免的一系列问题和事情吗？生成在 Firefox 上运行时间为 200 毫秒，在 I
下面脚本的目的是允许用户发布新的更新并在不刷新页面的情况下删除它们:这就是我使用 AJAX 的原因。 有两个小故障: 当用户发布更新时，它会正确保存在数据库中，并且正确的更新会在我的表格中向下滑动，但
我是一名优秀的程序员,十分优秀！