jQuery实现点击水纹波动动画

前端技术 2023/09/08 JavaScript

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>

本文地址：https://www.stayed.cn/item/21515

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案