suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfaches jQuery-Klick-Wasserwellen-Animationsbeispiel

Einfaches jQuery-Klick-Wasserwellen-Animationsbeispiel

php中世界最好的语言
php中世界最好的语言Original
2018-03-08 11:35:291609Durchsuche

Dieses Mal bringe ich Ihnen ein einfaches Beispiel für eine Klick-Wasser-Wellenanimation. Was ist zu beachten? Das Folgende ist ein praktischer Fall ein Blick.

JQuery-Klick-Wasserwellen-Animationsprinzip:

1. Fügen Sie 5c8b9de9fb73f56628b30e4b50c5fd36da7a5c458c43e8ac4398bd2378cdb6be 2. Der Code positioniert die Maus relativ zur Beschriftung und zeichnet einen Kreis mit dem Mauspunkt als Mittelpunkt
3. Der Radius des Kreises kann angepasst werden (der Standardwert ist die maximale Breite oder Höhe von die Beschriftung)
4. Punktfarbe und Animationszeit usw. Sie können den internen Code selbst ändern oder direkt die Methode $().css({}) aufrufen, um
--Einkapselungsbeispieladresse zu überschreiben : http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/index1.html
-- Nicht gekapselte Beispieladresse: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/indexlod.html

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite! 
$(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>


Verwandte Lektüre:

Einfache Funktion zum Hochladen von Bildern per Klick


Text in der ionischen App kann nicht lange kopiert werden Drücken Sie , So fügen Sie

ein

Das obige ist der detaillierte Inhalt vonEinfaches jQuery-Klick-Wasserwellen-Animationsbeispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So speichern Sie schnell den Inhalt einer Webseite und entfernen unerwünschte ElementeNächster Artikel：So speichern Sie schnell den Inhalt einer Webseite und entfernen unerwünschte Elemente

In Verbindung stehende Artikel

Mehr sehen