How to create ripple effect when clicked in js? (code example)-JS Tutorial-php.cn

How to create ripple effect when clicked in js? (code example)

青灯夜游

Release： 2018-10-26 16:15:54

forward

1961 people have browsed it

The content of this article is to introduce how to create the ripple effect when clicking on js? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s take a look at the renderings first:

How to create ripple effect when clicked in js? (code example)

##html code:

<p>
   <i></i>
</p>

Copy after login

css code:

<style>
p {
    margin: 0;
    position: relative;
    padding: 60px 30px;
    background-color: orange;
    color: #fff;
    width: 200px;
    overflow: hidden;
    text-align: center;
    border: 20px solid #000;
}
i {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
}
</style>

Copy after login

js code:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    (function() {        
        var key = true;
        $("p").click(function(event) {            
            var e = event || window.event;            
                if (key) {
                    key = false;                
                    var scale = 0;                
                    var a = 0.8;                
                    var timer = setInterval(function() {                    
                    if (scale >= 1 || a <= 0) {
                          scale = 0;
                          a = 0.8;
                          clearInterval(timer);
                          key = true;
                    }
                    $("i").css({                        
                        "left": e.pageX - 8 - 20,                        
                        "top": e.pageY - 8 - 20,                        
                        "transform": "translate(-50%,-50%) scale(" + scale + ")",                        
                        "background-color": "rgba(225,225,225," + a + ")"
                    });
                    scale += 0.01;
                    a -= 0.008;
                }, 10)
            }
        })
    }())
</script>

Copy after login

The above is the detailed content of How to create ripple effect when clicked in js? (code example). For more information, please follow other related articles on the PHP Chinese website!