js如何点击时的波纹效果?(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍js如何点击时的波纹效果?(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

先看看效果图:

js如何点击时的波纹效果?(代码实例)

html代码:

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

css代码:

<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>

js代码:

<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>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » js如何点击时的波纹效果?(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情