我尝试将我的网站按钮制作为 Material Design，其动画为 this但结果只有按钮，没有动画!我猜 JavaScript 没有被检测到。 我是网页设计的新手!有人请帮帮我! 请在下面检查我是否犯了任何错误。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="/files/favicon+1.ico" />
<link rel="icon" href="/files/favicon192.png" sizes="196x196" type="image/png" />
<title>Material Button</title>
<style>
html {
background: salmon;
}
* {
color: white;
font-family: 'Open Sans', sans-serif;
}
.wrap {
margin-top: 20px;
text-align: center;
}
.button {
display: inline-block;
margin: 0.3em;
padding: 1.2em 5em;
overflow: hidden;
position: relative;
text-decoration: none;
text-transform: uppercase;
border-radius: 3px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
border: none;
font-size: 15px;
text-align: center;
}
.button:hover {
box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
}
.green {
background-color: #4CAF50;
color: white;
}
.red {
background-color: #F44336;
color: white;
}
.blue {
background-color: #03A9F4;
color: white;
}
.ripple {
position: absolute;
background: rgba(0,0,0,.25);
border-radius: 100%;
transform: scale(0.2);
opacity:0;
pointer-events: none;
-webkit-animation: ripple .75s ease-out;
-moz-animation: ripple .75s ease-out;
animation: ripple .75s ease-out;
}
@-webkit-keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
@-moz-keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
@keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
</style>
<script language="javascript">
$('.button').mousedown(function (e) {
var target = e.target;
var rect = target.getBoundingClientRect();
var ripple = target.querySelector('.ripple');
$(ripple).remove();
ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
ripple.style.top = top + 'px';
ripple.style.left = left + 'px';
return false;
});
</script>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="wrap">
<h1>Material Design Button</h1>
<a class="button blue" href="#">Hover Me</a>
<a class="button red" href="#">Click Me</a>
<a class="button green" href="#">Love Me</a>
</div>
</body>
</html>最佳答案
这有两个问题:
不包含 Jquery javascript。你可以让谷歌为你托管它，或者把它放在你的元素中并引用它。与其说javascript没有“被检测到”，不如说jquery还不存在于页面上。单击您发布的链接中的设置按钮，然后单击 javascript 选项卡时，您可以看到该示例从何处获取 jquery。
除此之外，按钮事件是在文档准备好之前绑定(bind)的。
这是一个包含这两种情况的示例 - 脚本标记添加到按钮事件上方，按钮事件代码包装在 $(function(){ ... }); 中，这是 jQuery 文档就绪函数的简写。 https://learn.jquery.com/using-jquery-core/document-ready/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="/files/favicon+1.ico" />
<link rel="icon" href="/files/favicon192.png" sizes="196x196" type="image/png" />
<title>Material Button</title>
<style>
html {
background: salmon;
}
* {
color: white;
font-family: 'Open Sans', sans-serif;
}
.wrap {
margin-top: 20px;
text-align: center;
}
.button {
display: inline-block;
margin: 0.3em;
padding: 1.2em 5em;
overflow: hidden;
position: relative;
text-decoration: none;
text-transform: uppercase;
border-radius: 3px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
border: none;
font-size: 15px;
text-align: center;
}
.button:hover {
box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
}
.green {
background-color: #4CAF50;
color: white;
}
.red {
background-color: #F44336;
color: white;
}
.blue {
background-color: #03A9F4;
color: white;
}
.ripple {
position: absolute;
background: rgba(0,0,0,.25);
border-radius: 100%;
transform: scale(0.2);
opacity:0;
pointer-events: none;
-webkit-animation: ripple .75s ease-out;
-moz-animation: ripple .75s ease-out;
animation: ripple .75s ease-out;
}
@-webkit-keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
@-moz-keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
@keyframes ripple {
from {
opacity:1;
}
to {
transform: scale(2);
opacity: 0;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script language="javascript">
$(function(){
$('.button').mousedown(function (e) {
var target = e.target;
var rect = target.getBoundingClientRect();
var ripple = target.querySelector('.ripple');
$(ripple).remove();
ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
ripple.style.top = top + 'px';
ripple.style.left = left + 'px';
return false;
});
});
</script>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="wrap">
<h1>Material Design Button</h1>
<a class="button blue" href="#">Hover Me</a>
<a class="button red" href="#">Click Me</a>
<a class="button green" href="#">Love Me</a>
</div>
</body>
</html>关于javascript - Material 按钮动画不包含在 HTML Web 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31404371/