Simple jQuery click water ripple animation example-JS Tutorial-php.cn

Simple jQuery click water ripple animation example

php中世界最好的语言

Release： 2018-03-08 11:35:29

Original

1525 people have browsed it

This time I will bring you a simple jQuery click water ripple animation example. Use jQuery to create a click water ripple animation. What are the precautions? . Here is a practical case. Let’s take a look.

jQuery click water ripple animation principle:
1. Add # 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 (the default is the maximum width or height of the label)
4. Dot color , and animation time, etc. You can modify the internal code by yourself, or directly call the $().css({}) method to overwrite
--Encapsulation example address: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/index1.html
-- Unencapsulated example address: 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)+&#39;px&#39;, "left": ( e.pageX -ripple_obj.offset().left -R)+&#39;px&#39;,"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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!