时间:2021-07-01 10:21:17 帮助过:10人阅读
jQuery点击水纹波动动画原理:
1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX>
2.代码会定位 鼠标相对 与 标签的位置,以鼠标点为圆心画圆
3.圆的半径 可以自定义(默认为标签的最大宽或高度)
4.圆点颜色,和动画时间等可以自行修改内部代码,或直接 调用 $().css({})方法 进行覆盖
--封装示例地址: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016-4-8/ripplewrapperdemo1/index1.html
-- 未封装示例地址: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016-4-8/ripplewrapperdemo1/indexlod.html
$(function(){ $(".ripple-wrapper").css( { "position": " absolute", "top": " 0", "left": " 0", "z-index": " 1", "width": " 100%", "height": " 100%", "overflow": " hidden", "border-radius": " inherit", "pointer-events": " none" }); $(".ripple-wrapper").parent().click(function(e){ var ripple_obj=$(this).find(".ripple-wrapper"); if(ripple_obj.find("div").length){ripple_obj.find("div").remove();} ripple_obj.prepend("<div></div>"); var ripple_div=ripple_obj.find("div"); ripple_div.css( { "display": " block", "background": " rgba(255, 255, 255, 0.7)", "border-radius": " 50%", "position": " absolute", "-webkit-transform": " scale(0)", "transform": " scale(0)", "opacity": " 1", "transition": " all 0.7s", "-webkit-transition": " all 0.7s", "-moz-transition": " all 0.7s", "-o-transition": " all 0.7s", "z-index": " 1", "overflow": " hidden", "pointer-events": " none" }); var R= parseInt(ripple_obj.outerWidth());/*默认半径为ripple-wrapper宽*/ if(parseInt(ripple_obj.outerWidth())<parseInt(ripple_obj.outerHeight())){ R= parseInt(ripple_obj.outerHeight());/*如果高度大于宽半径为ripp,le-wrapper高*/ } ripple_div.css({"width":(R*2)+"px","height":(R*2)+"px","top": (e.pageY -ripple_obj.offset().top - R)+'px', "left": ( e.pageX -ripple_obj.offset().left -R)+'px',"transform":"scale(1)", "-webkit-transform":"scale(1)","opacity":"0"});; }); }); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script src="ripple-wrapper.js"></script> <style> .ck { cursor: pointer; display: block; padding: 1em; text-decoration: none; width: 200px; height: 20px; position: relative; overflow: hidden; color: #fff; } </style> </head> <body > <div class="ck" style="background: #5f5f5f"> 点一下 <div class="ripple-wrapper"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <style> .ck { background: #ffab91; display: block; padding: 1em; text-decoration: none; width: 200px; height: 20px; position: relative; overflow: hidden; } .ck .bd { background: rgba(0, 0, 0,0.8); border-radius: 50%; width: 0px; height: 0px; position: absolute; -webkit-transform: scale(0); transform: scale(0); opacity: 1; } .dh { animation: ldm 0.8s ; -moz-animation: ldm 0.8s ; -o-animation: ldm 0.8s ; -webkit-animation: ldm 0.8s ; } @-webkit-keyframes ldm { 100% { -webkit-transform: scale(1); opacity: 0 } } @keyframes ldm { 100% { -webkit-transform: scale(1); opacity: 0 } } </style> </head> <body style=" background: #aaab91;"> <div class="ck"> <span class="bd"></span> adasdsd </div> <script> $(".ck").click(function(e){ $(this).find(".bd").removeClass("dh"); var R=6; R= parseInt($(this).outerWidth()); if(parseInt($(this).outerWidth())<parseInt($(this).outerHeight())){ R= parseInt($(this).outerHeight()); } $(this).find(".bd").css({"width":(R*2)+"px","height":(R*2)+"px"}); $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R)+"px","top":(e.pageY-$(this).position().top-R)+"px" }); // $(this).find(".bd").css({"left":(e.pageX-$(this).position().left-R/2 )+"px","top":(e.pageY-$(this).position().top-R/2 )+"px" }); $(this).find(".bd").addClass("dh"); }); </script> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
简易的图片点击上传功能
ionic应用里文字不能长按复制、粘贴怎么办
以上就是简单的jQuery点击水纹波动动画示例的详细内容,更多请关注Gxl网其它相关文章!