jQuery实现点击水纹波动动画

2019-11-20 10:16:49

字体：大中小

来源：转载

供稿：网友

jQuery点击水纹波动动画原理:

    1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX>
    2.代码会定位鼠标相对与标签的位置，以鼠标点为圆心画圆
    3.圆的半径可以自定义(默认为标签的最大宽或高度)
    4.圆点颜色，和动画时间等可以自行修改内部代码，或直接调用 $().css({})方法进行覆盖

ripple-wrapper.js

$(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"});;    });         });

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

上一篇：Javascript实现苹果悬浮虚拟按钮

下一篇：JavaScript数据绑定实现一个简单的 MVVM 库