按钮点击水波纹效果插件ripple.js

所属分类:其他-动画效果

 46343  526  查看评论 (17)
分享到微信朋友圈
X
按钮点击水波纹效果插件ripple.js ie兼容9

更新时间:2017/5/23 23:17:13

更新说明:修复低版火狐浏览器下检测浏览器版本报错的Bug


更新时间:2017/5/13 下午9:22:28

更新说明:

1、增加插件配置接口,可自定义水波纹的颜色、透明度、和扩散速度以及是否显示手指鼠标指针配置;

2、修改在IE9及以下低版本浏览器中不执行效果;

V1.1版本配置项

参数数据类型缺省值说明
opacitynumber0.5水波纹透明度 0.1 - 1
speednumber0.6水波纹扩散速度 单位为秒
bgColorstring#ffffff水波纹颜色
cursorbooleantrue是否显示手指鼠标指针
new Ripple({
    opacity : 0.6,  //水波纹透明度
    speed : 1,      //水波纹扩散速度
    bgColor : "#ffffff", //水波纹颜色
    cursor : false  //是否显示手型指针
})

使用ripple.js无需引用其它库,且代码量少,调用非常简单

使用方法

1、引入js

<script src="ripple.js"></script>

2、调用

<script type="text/javascript">
    new Ripple()
</script>

3、在需要添加效果的元素上加上: data-ripple="ripple"

<div data-ripple="ripple">
    div标签
</div>
相关插件-动画效果

canvas管道流动动画

canvas小动画插件,代码注释全
  动画效果
 39034  331

cs3旋转动画实现地球周转

css33d效果旋转变形
  动画效果
 41373  439

HTML5 Canvas下雪效果插件

飘雪效果,可设置控制数量
  动画效果
 44367  353

3Dtransfrom和animation的结合

一个学习css3transfm3D和animation的入门效果
  动画效果
 28885  463

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Struggle 0
    2018/12/26 17:59:18
    ╃(_灬Βīη?ò╆╇ャざ 0
    2018/10/19 14:57:30
    动态添加的 a标签,无法实现效果,怎么办 回复
    是我的海 0
    2018/5/28 10:06:10
    无法跳转、无法触发事件的按钮要来有何用
        是我的海0
        2018/5/28 10:47:05
        成功解决a标签无法跳转,只需要在[data-ripple="ripple"] .ripple里加上 pointer-events: none 即可
        爱踢球的仁0
        2018/10/30 9:49:58
        请教,究竟要怎么修改代码呢
    回复
    i_sidaW 0
    2018/3/26 16:11:03
    ZHANGXIN-CN 0
    2018/1/4 17:25:03
    放在vue里面 在路由器换后就失效了是怎么回事 回复
    相濡以沫&馨 0
    2017/11/21 11:01:26
    .糖果布丁? 0
    2017/10/16 13:41:49

    放在  a标签里面 a标签的href就失效了.................

    回复
    总督sir 0
    2017/9/6 10:56:37

    为什么要那么贵

    回复
    999 0
    2017/8/30 12:00:09

    我想把点击事件改成触摸事件,没找到在哪里改

    回复
    挥笔?青春 0
    2017/7/21 17:22:22

    好用

        .糖果布丁?0
        2017/8/9 17:35:24

        为什么使用了没有效果

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复