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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
$.extend 的一个小问题
Jun 18 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
js实现简易计算器小功能
Nov 18 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实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
使用python实现语音文件的特征提取方法
2019/01/09 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python标记语句块使用方法总结
2019/08/05 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
业务主管岗位职责
2013/11/20 职场文书
法制宣传实施方案
2014/03/13 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书