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

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

 48830  530  查看评论 (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>
相关插件-动画效果

HTML5 Canvas下雪效果插件

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

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 56407  490

jQuery canvas实现圣诞下雪效果

canvas实现圣诞下雪效果,这个下雪效果有点炫.
  动画效果
 38845  383

bezie curve 曲线动画

bezie curve 曲线动画
  动画效果
 34570  417

讨论这个项目(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

        为什么使用了没有效果

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