首页 / JQUERY / 简单的jQuery点击水纹波动动画示例

简单的jQuery点击水纹波动动画示例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了简单的jQuery点击水纹波动动画示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4081字，纯文字阅读大概需要6分钟。

内容图文

这次给大家带来简单的jQuery点击水纹波动动画示例，用jQuery做出点击水纹波动画注意事项有哪些，下面就是实战案例，一起来看一下。

jQuery点击水纹波动动画原理:
1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX>
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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

简易的图片点击上传功能

ionic应用里文字不能长按复制、粘贴怎么办

以上就是简单的jQuery点击水纹波动动画示例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的简单的jQuery点击水纹波动动画示例全部内容，希望文章能够帮你解决简单的jQuery点击水纹波动动画示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/294664.html

来源：【匿名】