ホームページ >ウェブフロントエンド >jsチュートリアル >シンプルな jQuery クリック水紋アニメーションの例
今回は、jQuery を使用してクリック水紋アニメーションを作成するための簡単な例をお届けします。以下は実際の事例です。
jQuery のクリック水紋アニメーションの原則:
を追加します。 2. コードは、ラベルの位置は、マウスポイントを中心に円を描きます
3. 円の半径はカスタマイズ可能です (デフォルトはラベルの最大幅または高さです) 4. ドットの色、アニメーション時刻などは内部コードで変更することも、$().css({}) メソッドを直接呼び出して上書きすることもできます
--カプセル化されたサンプル アドレス: http://daxianshiyanshi.sinaapp.com/data/jsdata/2016- 4-8/ripplewrapperdemo1/index1.html
--カプセル化されていない例 アドレス: 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>
関連読書:
簡単な画像クリックアップロード機能
ionicアプリ内のテキストが長押しでコピー&ペーストできない場合はどうすればよいですか
以上がシンプルな jQuery クリック水紋アニメーションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。