Question

我尝试将我的网站按钮设置为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>

Answer 1

这有两个问题：

不包括Jquery javascript。您可以让谷歌为您托管或将其放入您的项目并引用它。并不是说javascript没有被“检测到”，而是jquery在页面上还没有存在。单击您发布的链接中的设置按钮，然后单击javascript选项卡，您可以看到该示例获得jquery的位置。

除此之外，在文档准备好之前，按钮事件已被绑定。

以下是两个示例的示例 - 脚本标记添加到按钮事件上方，按钮事件代码包含在$（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>

材质按钮动画不在HTML Web中

1 个答案: