search

Home  >  Article  >  Web Front-end  >  jQuery implements click water ripple animation_jquery

jQuery implements click water ripple animation_jquery

WBOY
WBOYOriginal
2016-05-16 15:06:161741browse

JQuery click water ripple animation principle:

1. Add 5c8b9de9fb73f56628b30e4b50c5fd36da7a5c458c43e8ac4398bd2378cdb6be
to the tag that needs to achieve the water ripple effect 2. The code will position the mouse relative to the label, and draw a circle with the mouse point as the center
3. The radius of the circle can be customized (default is the maximum width or height of the label)
4. You can modify the internal code for dot color, animation time, etc., or directly call the $().css({}) method to overwrite

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>

Demo picture

Unencapsulated code

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement Ajax in native JavaScript_javascript skillsNext article：How to implement Ajax in native JavaScript_javascript skills

Related articles

See more