jQuery超酷谷歌Material Design元素点击波特效

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

 28840  348  查看评论 (2)
分享到微信朋友圈
X
jQuery超酷谷歌Material Design元素点击波特效 ie兼容10

简要教程

jquery-ripple是一款效果非常酷的Google Material Design jQuery元素点击波特效插件。其它的点击波特效插件要修改光波的颜色要通过CSS来修改,该插件可以直接通过参数进行光波颜色的设置,非常方便。

该点击波特效的外观设计上使用Google Material Design,效果时尚大方。

安装

可以通过bower来安装该点击波特效插件。

$ bower install jquery-ripple --save

使用方法

使用该点击波特效插件要引入jQuery和jquery.ripple.js,以及jquery.ripple.css文件。

<link rel="stylesheet" href="css/jquery.ripple.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.ripple.js"></script>

HTML结构

你可以在一个按钮或任何可点击的HTML元素上使用该点击波特效。为该元素添加data-ripple属性。

<button data-ripple>Button</button>

调用插件

在页面加载完毕之后,使用下面的方法来调用该点击波特效插件。

$('[data-ripple]').ripple();

自定义光波颜色

你可以在参数中以对象的形式插入不同的CSS颜色来设置不同的光波颜色。

$('[data-ripple]').ripple({ color: '#EF5734' });

事件

事件名称 描述

beforeripple 在ripple-activeclass被添加到DOM元素之前触发touchstart/mousedown事件

afterripple 在ripple-activeclass被从DOM元素移除之前触发touchend/mouseup/mouseleave事件


相关插件-动画效果,杂项

jQuery+HTML5相应式文字粒子动画

jQuery+HTML5相应式文字粒子动画,使用canvas的。请在服务器环境下运行。
  动画效果
 50905  669

jQuery雪花飘落

jQuery雪花飘落(pc端及移动端均兼容)
  动画效果
 38597  464

背景彩带动画插件ribbon.js

只有1kb的javascript 可以使用 HTML5 画布在您的网站上生成背景彩带动画
  动画效果
 38436  411

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 40257  301

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

    huang36 0
    2017/12/8 10:21:30

    如果不想文字颜色也改变应该怎么做

    回复
    健健康康 0
    2016/6/29 13:06:09
    有回掉函数吗? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复