按钮点击效果jquery

时间：2025-04-09 14:05:19
按钮点击效果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: ; padding: ;}

    ul { border-top: 6px solid hsl(, %, %); 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(, %, %); text-decoration: none;}

    .ink { 

        position: absolute;

        display: block;

        background: hsl(, %, %);

        left: ;

        top: ;

        -webkit-transform: scale();

        -moz-transform: scale();

        -o-transform: scale();

        transform: scale();

        border-radius: %;

    }

    .animation {

        -webkit-animation: ripple 1s ease-in-out;

    }

    @-webkit-keyframes ripple{

        % { opacity: ; -webkit-transform: scale();}

    }

</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()/;

        var left = e.pageX - parent.offset().left - ink.width()/;

        ink.css({

            top: top,

            left: left

        });

        ink.addClass('animation');

    });

</script>

</body>

相关文章