Maison > Article > interface Web > Exemple d'animation simple d'ondulation de l'eau en cliquant sur jQuery
Cette fois, je vais vous présenter un exemple simple d'animation d'ondulation d'eau par clic. Utilisez jQuery pour créer une animation d'ondulation d'eau par clic Quelles sont les choses à noter Ce qui suit est un cas pratique, prenons. un regard.
Principe d'animation de l'ondulation de l'eau en cliquant sur JQuery :
1. Ajoutez 5c8b9de9fb73f56628b30e4b50c5fd36da7a5c458c43e8ac4398bd2378cdb6be 2. Le code positionnera la souris par rapport à l'étiquette et dessinera un cercle avec le point de la souris comme centre
3. Le rayon du cercle peut être personnalisé (la valeur par défaut est la largeur ou la hauteur maximale de l'étiquette)
4. Couleur du point et durée de l'animation, etc. Vous pouvez modifier le code interne par vous-même, ou appeler directement la méthode $().css({}) pour écraser
--Exemple d'adresse d'encapsulation : http://daxianshiyanshi.sinaapp.com/data/jsdata/2016 -4-8/ripplewrapperdemo1/index1.html
-- Exemple d'adresse non encapsulée : 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)+'px', "left": ( e.pageX -ripple_obj.offset().left -R)+'px',"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>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php chinois. site web!
Fonction de téléchargement d'image simple par clic
Le texte dans l'application ionique ne peut pas être copié longtemps en appuyant sur , Comment coller
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!