专栏首页蚂蚁开源社区jQuery和CSS3炫酷图片和按钮点击波特效源码

jQuery和CSS3炫酷图片和按钮点击波特效源码

ippler是一款效果非常炫酷的jQuery和CSS3图片和按钮点击波特效插件。点击波特效是指在按钮或图片上点击的时候,从点击的位置开始,会产生一种圆形光波向外辐射的炫酷效果。这款点击波特效同时支持桌面设备和移动触摸设备。

使用方法

与Bootstrap结合使用

该点击波特效可以完美的和Bootstrap 3结合,用于制作按钮和链接按钮的点击波特效:

bootstrap按钮点击波效果:

使用步骤

在页面中引入必要的文件:

<!-- If you want to use the buttons on the bootstrap --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- rippler CSS --> <link rel="stylesheet" href="./css/rippler.min.css"> <!-- vendor js --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- rippler js --> <script src="./dist/js/jquery.rippler.min.js"></script>

该点击波特效的HTML结构如下:

<body> <button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button> </body>

在页面加载完毕后调用该点击波插件:

$(document).ready(function() { $(".rippler").rippler({ effectClass : 'rippler-effect' ,effectSize : 16 // Default size (width & height) ,addElement : 'div' // e.g. 'svg'(feature) ,duration : 400 }); });

浏览器兼容

该点击波特效需要CSS3的支持,可以运行在所有最新版的现代浏览器上。

IE10+

Safari

Chrome

Firefox

Opera

源码演示/下载请点击阅读原文

↓↓↓↓↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【代码艺术】带视觉特效的js密码强度检测开源库

    这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度...

    用户5997198
  • 【技术分享】支持移动手机的刮刮卡效果实现

      ScratchCard是一款支持移动手机的HTML5 canvas刮刮卡JS插件。该刮刮卡JS插件支持移动触摸事件,提供刮卡的回调函数,简单易用,效果非常不...

    用户5997198
  • 如何使用JavaScript来判断是否为移动设备?

      由于移动设备的显示屏幕相对于桌面显示器来说小很多,在桌面显示器上能够正常显示的内容,到了移动设备中就不正常了。为了实现移动端和桌面端的相互跳转,我们可以通过...

    用户5997198
  • 【一统江湖的大前端(8)】matter.js 经典物理

    在前端开发领域,物理引擎是一个相对小众的话题,它通常都是作为游戏开发引擎的附属工具而出现的,独立的功能演示作品常常给人好玩但是无处可用的感觉。仿真就是在计算机的...

    大史不说话
  • 编程语言的卡通形象,你喜欢哪个?

    老九君
  • okhttp拦截器的使用------修改baseurl

    有的时候做项目的时候会遇到调用接口的url和之前接口定义的url不一样,很可能连retrofit已经设置好的baseurl都要换,但是retrofit并没有提供...

    刘晓杰
  • AAAI 2018 | 三星提出移动端神经网络模型加速框架DeepRebirth

    机器之心
  • Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库

        在 .Net Core 2.2中 Microsoft.AspNetCore.App 默认内置了EntityFramework Core 包,所以在使用过...

    梁规晓
  • 《从0到1学习Spark》-- 初识Spark SQL

    今天小强给大家介绍Spark SQL,小强的平时的开发中会经常使用Spark SQL进行数据分析查询操作,Spark SQL是整个Spark生态系统中最常用的组...

    程序员小强
  • dubbo请求处理线程模型实现分析

    问题的由来: 如果事件处理的逻辑能迅速完成,并且不会发起新的 IO 请求,比如只是在内存中记个标识, 则直接在 IO 线程上处理更快,因为减少了线程池调度。 ...

    wannshan

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动