<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%); 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({
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>