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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue实现标签云效果的示例
Nov 09 Javascript
React实现动效弹窗组件
Jun 21 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弱类型的安全问题详细总结
2016/09/25 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
javascript 获取网页参数系统
2008/07/19 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
编程语言Python的发展史
2014/09/26 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python统计字符的个数代码实例
2020/02/07 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
酒店管理专业学生求职信
2013/09/27 职场文书
实习单位接收函
2014/01/11 职场文书
高一新生军训感言
2014/03/02 职场文书
教师年度考核个人总结
2015/02/12 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书