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.js是否已加载的判断代码
May 20 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
浅谈Vue数据响应
Nov 05 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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与SQL注入攻击[三]
2007/04/17 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python三元运算符实现方法
2013/12/17 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python实现简单状态框架的方法
2015/03/19 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
学校消防安全制度
2014/01/30 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
安全横幅标语
2014/06/09 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014年财政工作总结
2014/12/10 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书