js如何点击时的波纹效果？（代码案例）
时间：2024/11/29作者：未知来源：手揣网教程人气：
- [摘要]本篇文章给大家带来的内容是介绍js如何点击时的波纹效果？（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。先看看效果图：html代码：<p><i>...本篇文章给大家带来的内容是介绍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>以上就是js如何点击时的波纹效果？（代码实例）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：js如何点击时的波纹效果？（代码案例）