jQuery实现点击水纹波动动画


Posted in Javascript onApril 10, 2016

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>

演示图

jQuery实现点击水纹波动动画

未封装代码

<!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>
Javascript 相关文章推荐
js单向链表的具体实现实例
Jun 21 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
深入浅析React中diff算法
May 19 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 #Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 #Javascript
JS表单验证的代码(常用)
Apr 08 #Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 #Javascript
关于cookie的初识和运用(js和jq)
Apr 07 #Javascript
You might like
php INI配置文件的解析实现分析
2011/01/04 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php图片上传类 附调用方法
2016/05/15 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Ubuntu下安装PyV8
2016/03/13 Python
python 动态加载的实现方法
2017/12/22 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
设置器与访问器的定义以及各自特点
2016/01/08 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
企业文化标语大全
2014/06/10 职场文书
企业标语口号
2014/06/10 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
谢师宴学生答谢词
2015/09/30 职场文书