按钮点击效果jquery




<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>
人如代码，规矩灵活；代码如诗，字句精伦。