按钮点击效果jquery
![](http://images0.cnblogs.com/blog/638386/201412/121434010561396.jpg)
<html><head> <meta charset="UTF-8"> <title>QQ</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mqq-bottom-ad" content="no"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <style> body { background: url(http://thecodeplayer.com/u/m/b1.png) no-repeat; background-size: cover;margin:0;} h1 { color: #fff;} ul,li{ margin: 0; padding: 0;} ul { border-top: 6px solid hsl(180, 40%, 60%); width: 200px; background: #fff; } li {position: relative; overflow: hidden; border: 1px solid #ccc; border-bottom: none; list-style: none; } li a { display: block; padding: 10px 15px; font: normal 14px/28px "Montserrat"; -webkit-user-select: none; position: relative; color: hsl(180, 40%, 40%); text-decoration: none;} .ink { position: absolute; display: block; background: hsl(180, 40%, 50%); left: 0; top: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); border-radius: 100%; } .animation { -webkit-animation: ripple 1s ease-in-out; } @-webkit-keyframes ripple{ 100% { opacity: 0; -webkit-transform: scale(2);} } </style> <body> <h1>12月8日Demo</h1> <ul> <li><a data-link="true" href="#">按钮1</a></li> <li><a href="#">按钮2</a></li> <li><a href="#">按钮3</a></li> <li><a href="#">按钮4</a></li> <li><a data-link="true" href="#">按钮5</a></li> <li><a data-link="true" href="#">按钮6</a></li> </ul> <script> $("a").on("click", function(e){ // e.preventDefault(); var parent = $(this).parent(); if(!parent.find(".ink").length){ parent.prepend('<span class="ink"></span>'); } /** if(!parent.hasClass(".ink")){ parent.prepend('<span class="ink"></span>'); }else if(parent.hasClass(".ink")){ return false; } */ var ink = parent.find(".ink"); ink.removeClass("animation"); if(!ink.width() && !ink.height()){ //var d = Math.max(parent.innerWidth(),parent.innerHeight()); //var d = Math.max(parent.outerWidth(),parent.outerHeight()); var d = Math.max(parseInt(parent.css('width')),parseInt(parent.css('height'))); // alert(d) ink.css({ width: d, height:d, }); } //设置ink的绝对位置 var top = e.pageY - parent.offset().top - ink.height()/2; var left = e.pageX - parent.offset().left - ink.width()/2; ink.css({ top: top, left: left }); ink.addClass('animation'); }); </script> </body>
人如代码,规矩灵活;代码如诗,字句精伦。