Material Design的按钮，涟漪效果
CPLBill
8年前
<p>写在前面：<br> 这是一篇菜鸟的学习笔记，记录实现过程中的难点，没有考虑兼容、性等问题。供新手参考，也希望前辈们指点。</p> <h3><strong>编写过程记录：</strong></h3> <p>写个涟漪效果真的折腾了好几天。唉，毕竟没有系统学过js、jquery、css。这个过程中的@KeyFrames也是摸索了几天，遇到各种低级错误。</p> <h3><strong>大体思路：</strong></h3> <p>涟漪效果实际上就是一个扩展开的圆形div。鼠标点击按钮记录其坐标，通过相关计算得出产生涟漪的div坐标。然后将该div放置好后开启展开动画如此而已。</p> <h3><strong>效果描述：</strong></h3> <p>直接看动画吧。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b7d63b4df5a7bf9b07385c1b4169a339.gif"></p> <p style="text-align:center">waves.gif</p> <h3><strong>代码要点：</strong></h3> <ul> <li> <p>用这个方法来得到鼠标点击坐标：</p> <pre> <code class="language-javascript">$(".waves").mousedown(function(e) {})</code></pre> </li> <li> <p>得到当前按钮的涟漪div：</p> <pre> <code class="language-javascript">var wavesDiv = box.find("div");</code></pre> </li> <li> <p>css3动画的定义：</p> <pre> <code class="language-javascript">@keyframes animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); /*因为涟漪的大小为标签的最长边，为了保证点击标签边缘时，涟漪也能覆盖整个标签，scale值最小应为2*/ opacity: 0; } }</code></pre> </li> <li>将动画“当作”css样式 <pre> <code class="language-javascript">.waves-effect-animation{ animation: animation-definition 1s ease-out; /*兼容各大浏览器*/ -moz-animation: animation-definition 1s ease-out; -webkit-animation: animation-definition 1s ease-out; -o-animation: animation-definition 1s ease-out; }</code></pre> </li> <li>js中使用动画 <pre> <code class="language-javascript">//设置涟漪div样式，准备播放动画 wavesDiv.css({ width: wH, height: wH, left: nX, top: nY }).addClass("waves-effect-animation");//播放动画</code></pre> </li> </ul> <h3><strong>完整代码：</strong></h3> <pre> <code class="language-javascript"><html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".waves").mousedown(function(e) { var box = $(this); var wavesDiv = box.find("div"); //第一次没有涟漪div，动态生成 if(wavesDiv[0] == null){ var div = "<div class='waves-effect'></div>"; box.append(div); wavesDiv = box.find("div"); } //设置按钮样式为’waves-effect‘即去掉动画样式’waves-effect-animation‘ wavesDiv[0].className = 'waves-effect'; //计算涟漪坐标（折算成左上角坐标而非中心点），涟漪大小（取外标签最长边） var wH = box.width() > box.height() ? box.width() : box.height(); var iX = e.pageX - box.offset().left; var iY = e.pageY - box.offset().top; var nX = iX - wH/2; var nY = iY - wH/2; //设置涟漪div样式，准备播放动画 wavesDiv.css({ width: wH, height: wH, left: nX, top: nY }).addClass("waves-effect-animation");//播放动画 }); }); </script> <style> .waves{ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius: 3px; display: inline-block; outline:none; border:0; overflow: hidden; position:relative; opacity: 0.9; text-align:center; } .waves:hover{ opacity: 1; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.20),0 3px 12px 0 rgba(0,0,0,0.16); } .waves-effect{ border-radius: 100%; background-color:#D8D8D8; left: 20px; top: 20px; transform: scale(0); width: 10px; height: 10px; position:absolute; } .waves-effect-animation{ animation: animation-definition 1s ease-out; /*兼容各大浏览器*/ -moz-animation: animation-definition 1s ease-out; -webkit-animation: animation-definition 1s ease-out; -o-animation: animation-definition 1s ease-out; } @keyframes animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); /*因为涟漪的大小为标签的最长边，为了保证点击标签边缘时，涟漪也能覆盖整个标签，scale值最小应为2*/ opacity: 0; } } </style> </head> <body> <b>不需要加p标签</b> <br/> <br/> <button class="waves" style="width: 125px;height: 40px;background-color: #27C4B4;color: white"> Button1 </button> <button class="waves" style="width: 125px;height: 40px;background-color: #EE6E73;color: white"> Button2 </button> <br/><br/> <b>需要加p标签<b> <br/> <br/> <div class="waves" style="width: 125px;height: 40px;background-color: #311B92;color: white"> <p style="line-height:40px; display:inline;">Div</p> </div> <a href="#" class="waves" style="width: 125px;height: 40px;background-color: #FF9800;color: white"> <p style="line-height:40px; display:inline;">A</p> </a> <span class="waves" style="width: 125px;height: 40px;background-color: #607D8B;color: white"> <p style="line-height:40px; display:inline;">Span</p> </span> </body> </html></code></pre> <h3><strong>后续内容：</strong></h3> <ul> <li> <p>目前只有button使用该样式最方便（一开始也是只为button而写的），至于div、a、span等标签显示文字还需要嵌套一个p标签</p> </li> <li> <p>为了方便重复使用，还需要将css、js提取出来</p> </li> </ul> <p> </p> <p>来自：http://www.jianshu.com/p/44e256491928</p> <p> </p>