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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
React 组件间的通信示例
Jun 14 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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编程注意事项的小结
2013/04/27 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
动态创建类实例代码
2009/10/07 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python实现自动打卡的示例代码
2020/10/10 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
python3读取文件指定行的三种方法
2021/05/24 Python
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python