jQuery实现点击水纹波动动画

更新时间：2016年04月10日 10:36:59 作者：宝具滑

今天要为大家绍一款由jquery实现的鼠标单击出现水波特效。用鼠标点击页面,你可以看到页面不断出面水波纹效果。然后水波纹渐渐消失。效果非常不错

jQuery点击水纹波动动画原理:

    1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX>
    2.代码会定位鼠标相对与标签的位置，以鼠标点为圆心画圆
    3.圆的半径可以自定义(默认为标签的最大宽或高度)
    4.圆点颜色，和动画时间等可以自行修改内部代码，或直接调用 $().css({})方法进行覆盖

ripple-wrapper.js

$(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"});;
    }); 
    
    });

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>
  <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>

您可能感兴趣的文章:

jQuery 创建Dom元素
jQuery 创建Dom元素代码，需要的朋友可以参考下。
2010-05-05
jQuery根据ID、CLASS、等获取对象的实例
下面小编就为大家带来一篇jQuery根据ID、CLASS、等获取对象的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jQuery实现表格行和列的动态添加与删除方法【测试可用】
这篇文章主要介绍了jQuery实现表格行和列的动态添加与删除方法,涉及jQuery针对页面元素的动态添加与删除相关技巧,非常简便实用,需要的朋友可以参考下
2016-08-08
JS拖动选择table里的单元格完整实例【基于jQuery】
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下
2019-05-05
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或者是后面要讲解到的$.ajax方法）。
2009-10-10
JQuery 动态生成Table表格实例代码
这篇文章主要介绍了JQuery 动态生成Table表格实例代码的相关资料,这里附有实现实例代码，具有一定的参考价值，需要的朋友可以参考下
2016-12-12
Bookmarklet实现启动jQuery(模仿云输入法)
最近流行的 sogo云输入法， QQ云输入法，都用到了bookmarklet技术。
2010-09-09
jQuery实现雪花飘落效果
这篇文章主要为大家详细介绍了jQuery实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JQuery从头学起第二讲
在第一讲中，已经对JQuery做了入门级的介绍，我相信看过的网友都应该知道怎么开始写一个简单的JQuery程序了。首先是需要引入一个JQuery包，其次是根据JQuery的语法写代码就可以了。
2010-07-07
jquery ezUI 双击行记录弹窗查看明细的实现方法
下面小编就为大家带来一篇jquery ezUI 双击行记录弹窗查看明细的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06

jQuery实现点击水纹波动动画

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具